/**
 * Spec Configurator — default styles.
 *
 * Deliberately plain: enough structure that the configurator is usable
 * out of the box on any theme, without imposing a look.
 *
 * Overriding, in order of effort:
 *
 * 1. Brand colours — set them in the plugin settings. They arrive as CSS
 *    custom properties (--specfg-brand etc.) and most accents follow.
 *
 * 2. Individual rules — add your own CSS in the theme. Every selector
 *    here is a single class, so a theme rule of equal specificity that
 *    loads later wins. No !important is used anywhere in this file.
 *
 * 3. Everything — dequeue this stylesheet entirely:
 *
 *        add_filter( 'specfg_enqueue_default_styles', '__return_false' );
 *
 *    The markup keeps its classes, so the theme can style from scratch.
 */

/* ---------------------------------------------------------------
   Configurator
   --------------------------------------------------------------- */

.specfg-calculator {
	margin: 32px 0;
	padding: 24px;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background: #fafafa;
}

.specfg-calculator__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
}

.specfg-calculator__base {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	margin-bottom: 16px;
	border-bottom: 1px solid #e0e0e0;
}

/* --- Search ------------------------------------------------- */

.specfg-search {
	margin-bottom: 16px;
}

.specfg-search__input {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}

.specfg-search__input:focus {
	outline: none;
	border-color: var( --specfg-brand, #1a1a1a );
}

.specfg-search__empty {
	margin: 10px 0 0;
	font-size: 14px;
	color: #777;
}

/* --- Groups (accordion) -------------------------------------- */

.specfg-group {
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	overflow: hidden;
}

.specfg-group__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Chevron, drawn in CSS so no icon font is needed. */
.specfg-group__head::after {
	content: '';
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: 4px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: rotate( 45deg );
	transition: transform 0.15s ease;
}

.specfg-group[open] .specfg-group__head::after {
	transform: rotate( -135deg );
}

/* Hides the native disclosure triangle. */
.specfg-group__head::-webkit-details-marker {
	display: none;
}

.specfg-group.has-selection {
	border-color: var( --specfg-brand, #bbb );
}

.specfg-group__name {
	flex: 1 1 auto;
}

.specfg-group__meta {
	font-size: 13px;
	font-weight: 500;
	color: var( --specfg-brand, #555 );
	white-space: nowrap;
}

.specfg-group__body {
	padding: 4px 14px 14px;
	border-top: 1px solid #f0f0f0;
}

.specfg-group--flat .specfg-group__name {
	margin: 0;
	padding: 12px 14px 4px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666;
}

.specfg-group--flat .specfg-group__body {
	border-top: none;
}

/* --- Option rows --------------------------------------------- */

.specfg-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid #f2f2f2;
	cursor: pointer;
}

.specfg-option:last-child {
	border-bottom: none;
}

.specfg-option__label {
	flex: 1 1 auto;
}

.specfg-option__price {
	font-weight: 600;
	white-space: nowrap;
	color: #444;
}

/* --- Summary -------------------------------------------------- */

.specfg-summary {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #e0e0e0;
}

.specfg-summary__title {
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666;
}

.specfg-summary__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f2f2f2;
}

.specfg-summary__row--base {
	font-weight: 600;
}

.specfg-summary__label {
	flex: 1 1 auto;
}

.specfg-summary__price {
	font-weight: 600;
	white-space: nowrap;
}

.specfg-summary__remove {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: #999;
	background: none;
	border: none;
	cursor: pointer;
}

.specfg-summary__remove:hover {
	color: #c00;
}

.specfg-summary__empty {
	margin: 8px 0;
	font-size: 14px;
	color: #888;
}

.specfg-calculator__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 16px 0;
	margin-top: 8px;
	border-top: 2px solid var( --specfg-brand, #333 );
	font-size: 18px;
}

.specfg-calculator__total-value {
	font-size: 26px;
	font-weight: 700;
	color: var( --specfg-brand, #1a1a1a );
}

.specfg-calculator__note {
	margin: 12px 0 0;
	font-size: 13px;
	color: #777;
}

/* ---------------------------------------------------------------
   Sales mode — only rendered for users who may override prices.
   Regular visitors never receive this markup at all.
   --------------------------------------------------------------- */

.specfg-calculator--sales {
	border-width: 2px;
	border-color: var( --specfg-brand, #1a1a1a );
}

.specfg-sales-notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #fff8e1;
	border-left: 3px solid #f0ad00;
	font-size: 13px;
	line-height: 1.5;
	color: #6b5400;
}

.specfg-price-edit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* The catalogue price stays visible so it is clear what was changed. */
.specfg-price-edit__list {
	font-size: 13px;
	color: #888;
}

.specfg-price-edit.is-changed .specfg-price-edit__list {
	text-decoration: line-through;
}

.specfg-price-edit__input {
	width: 110px;
	padding: 6px 8px;
	font-size: 14px;
	font-weight: 600;
	text-align: right;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.specfg-price-edit__input:focus {
	outline: none;
	border-color: var( --specfg-brand, #1a1a1a );
	box-shadow: 0 0 0 2px rgba( 0, 0, 0, 0.08 );
}

.specfg-price-edit__input.is-changed {
	background: #fffbf0;
	border-color: #f0ad00;
}

/* ---------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------- */

@media ( max-width: 560px ) {
	.specfg-field {
		flex: 1 1 100%;
	}
}

@media ( max-width: 480px ) {
	.specfg-calculator {
		padding: 16px;
	}

	.specfg-option,
	.specfg-summary__row {
		flex-wrap: wrap;
	}

	.specfg-price-edit__input {
		width: 90px;
	}

	.specfg-group__body {
		padding: 4px 10px 12px;
	}
}

/* ---------------------------------------------------------------
   Request form
   --------------------------------------------------------------- */

.specfg-form {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e0e0e0;
}

.specfg-form__title {
	margin: 0 0 12px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666;
}

/*
 * Fields flow side by side and wrap on narrow screens. Because they
 * flex, a row keeps working when some fields are set to Hidden — the
 * remaining ones just share the space.
 */
.specfg-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 14px;
}

.specfg-form__row:last-of-type {
	margin-bottom: 18px;
}

/*
 * flex-basis is deliberately small: three fields plus gaps have to fit a
 * narrow product column without wrapping. They still grow to fill the
 * row, and wrap only when there genuinely is not enough width.
 */
.specfg-field {
	flex: 1 1 130px;
	min-width: 0;
	margin: 0;
}

/* Message always takes the full width. */
.specfg-field--textarea {
	flex: 1 1 100%;
}

.specfg-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 500;
}

.specfg-field input[type="text"],
.specfg-field input[type="email"],
.specfg-field input[type="tel"],
.specfg-field textarea {
	/*
	 * Without border-box the padding and border are added on top of the
	 * 100% width, so fields overflow their column and push each other
	 * onto new rows. Not every theme sets this globally.
	 */
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.4;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.specfg-field textarea {
	resize: vertical;
}

.specfg-field input:focus,
.specfg-field textarea:focus {
	outline: none;
	border-color: var( --specfg-brand, #1a1a1a );
}

.specfg-field__required {
	color: #c00;
}

.specfg-field--consent {
	margin-bottom: 18px;
}

.specfg-field--consent label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
}

.specfg-field--consent input {
	margin-top: 2px;
	flex: 0 0 auto;
}

/*
 * Honeypot. Kept out of sight without display:none, which some bots
 * detect and skip.
 */
.specfg-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.specfg-form__error {
	margin: 0 0 12px;
	padding: 10px 12px;
	font-size: 14px;
	color: #8a1f1f;
	background: #fdecea;
	border-left: 3px solid #c00;
}

.specfg-form__actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.specfg-form__send {
	flex: 1 1 auto;
	padding: 14px 20px;
	font-size: 16px;
	font-weight: 600;
	color: var( --specfg-brand-text, #fff );
	background: var( --specfg-brand, #1a1a1a );
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.specfg-form__send:hover:not( :disabled ) {
	background: var( --specfg-brand-hover, #000 );
}

.specfg-form__send:disabled {
	opacity: 0.6;
	cursor: default;
}

.specfg-form__back {
	padding: 14px 18px;
	font-size: 15px;
	color: #555;
	background: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
}

.specfg-form__back:hover {
	border-color: #999;
}

/* --- Success ------------------------------------------------- */

.specfg-success {
	padding: 24px;
	text-align: center;
	background: #f1f8f2;
	border: 1px solid #cfe6d4;
	border-radius: 6px;
}

.specfg-success__title {
	margin: 0 0 8px;
	font-size: 18px;
}

.specfg-success__text {
	margin: 0;
	color: #4a6b50;
}

/* --- Sales mode: discounts and free-text lines ---------------- */

.specfg-discount-input {
	width: 70px;
}

.specfg-custom-line {
	gap: 8px;
}

.specfg-custom-line__label {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 6px 8px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.specfg-custom-line__label:focus {
	outline: none;
	border-color: var( --specfg-brand, #1a1a1a );
}

.specfg-summary__add {
	margin: 8px 0 0;
}

.specfg-add-line {
	padding: 8px 14px;
	font-size: 14px;
	color: #444;
	background: none;
	border: 1px dashed #bbb;
	border-radius: 4px;
	cursor: pointer;
}

.specfg-add-line:hover {
	border-color: var( --specfg-brand, #888 );
	color: var( --specfg-brand, #222 );
}

.specfg-total-discount {
	border-bottom: none;
}

/* ---------------------------------------------------------------
   Price call-to-action
   --------------------------------------------------------------- */

/*
 * Smooth scrolling is set on the root rather than in JS, and honours the
 * visitor's reduced-motion preference automatically.
 */
html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

.specfg-price-cta {
	margin: 0 0 20px;
}

.specfg-price-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var( --specfg-brand-text, #fff );
	background: var( --specfg-brand, #1a1a1a );
	border-radius: 4px;
	transition: background 0.15s ease;
}

.specfg-price-cta__icon {
	flex: 0 0 auto;
}

.specfg-price-cta__button:hover,
.specfg-price-cta__button:focus {
	color: var( --specfg-brand-text, #fff );
	background: var( --specfg-brand-hover, #000 );
	text-decoration: none;
}

/* Keeps the heading clear of a sticky site header when jumped to. */
#specfg-configurator {
	scroll-margin-top: 100px;
}