/* ==========================================================================
   IdeaPlugins – Product Requirements
   Frontend styles for requirement fields on the single product page.
   Scoped entirely under .ideapr-wrapper so it never leaks into the theme.

   Every visual property that a theme could plausibly also style (borders,
   spacing, radius, colors, font sizes, shadows) is set with !important so
   this block always renders the same premium look, regardless of theme or
   other plugin CSS — per project isolation requirements.
   ========================================================================== */

.ideapr-wrapper.ideapr-product-requirements {
	--ideapr-primary: #6C5CE7;
	--ideapr-primary-dark: #5849c2;
	--ideapr-accent: #FF6B81;
	--ideapr-gradient: linear-gradient(135deg, #6C5CE7 0%, #FF6B81 100%);
	--ideapr-border: #e6e6f0;
	--ideapr-text: #1d2327;
	--ideapr-text-muted: #6b7280;
	--ideapr-radius: 14px;
	--ideapr-radius-sm: 10px;

	/* Escape any parent flex/grid row so we're never squeezed into a
	   narrow column next to the quantity input or Add to Cart button. */
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	flex: 1 1 100% !important;
	flex-basis: 100% !important;
	grid-column: 1 / -1 !important;
	align-self: stretch !important;
	float: none !important;
	clear: both !important;
	order: -1 !important;

	box-sizing: border-box !important;
	margin: 0 0 22px !important;
	padding: 20px 22px !important;
	border: 1px solid var(--ideapr-border) !important;
	border-radius: var(--ideapr-radius) !important;
	background: #fbfbff !important;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
	position: relative;
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.ideapr-wrapper.ideapr-product-requirements::before {
	content: "" !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	height: 3px !important;
	background: var(--ideapr-gradient) !important;
}

.ideapr-wrapper.ideapr-product-requirements *,
.ideapr-wrapper.ideapr-product-requirements *::before,
.ideapr-wrapper.ideapr-product-requirements *::after {
	box-sizing: border-box !important;
}

.ideapr-wrapper .ideapr-requirements-title {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: 100% !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--ideapr-text) !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
}

.ideapr-wrapper .ideapr-requirements-title::before {
	content: "" !important;
	display: inline-block !important;
	width: 8px !important;
	height: 8px !important;
	border-radius: 50% !important;
	background: var(--ideapr-gradient) !important;
	flex: 0 0 auto !important;
}

/* Fields lay out in a responsive grid so the block uses the available
   width nicely instead of stacking into a tall, narrow strip with huge
   empty gaps. */
.ideapr-wrapper .ideapr-requirements-fields {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
	gap: 14px 16px !important;
	width: 100% !important;
	align-items: start !important;
}

.ideapr-wrapper .ideapr-field {
	width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.ideapr-wrapper .ideapr-field-checkbox,
.ideapr-wrapper .ideapr-field-file,
.ideapr-wrapper .ideapr-field-textarea {
	grid-column: 1 / -1 !important;
}

.ideapr-wrapper .ideapr-field-label {
	display: block !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: var(--ideapr-text) !important;
	margin: 0 0 6px !important;
	line-height: 1.4 !important;
}

.ideapr-wrapper .ideapr-required {
	color: var(--ideapr-accent) !important;
}

.ideapr-wrapper input.ideapr-input,
.ideapr-wrapper select.ideapr-input,
.ideapr-wrapper textarea.ideapr-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border: 1px solid var(--ideapr-border) !important;
	border-radius: var(--ideapr-radius-sm) !important;
	padding: 10px 13px !important;
	font-size: 13.5px !important;
	line-height: 1.4 !important;
	color: var(--ideapr-text) !important;
	background: #fff !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
	appearance: auto;
}

.ideapr-wrapper input.ideapr-input:focus,
.ideapr-wrapper select.ideapr-input:focus,
.ideapr-wrapper textarea.ideapr-input:focus {
	outline: none !important;
	border-color: var(--ideapr-primary) !important;
	box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.14) !important;
}

.ideapr-wrapper select.ideapr-input {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236C5CE7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='5 8 10 13 15 8'%3e%3c/polyline%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 13px !important;
	padding-right: 38px !important;
	cursor: pointer !important;
}

/* Once Select2 initialises a <select>, it adds this class and hides the
   original element with an inline style. Our forced `display: block`
   above would otherwise override that inline style and show BOTH the
   native select and the Select2 replica stacked on top of each other. */
.ideapr-wrapper select.ideapr-input.select2-hidden-accessible {
	display: none !important;
}

.ideapr-wrapper .ideapr-textarea {
	min-height: 76px !important;
	resize: vertical !important;
}

/* File upload — styled as a compact, inline dropzone row instead of a
   tall empty box. */
.ideapr-wrapper .ideapr-field-file .ideapr-file-upload-shell {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	border: 1.5px dashed var(--ideapr-border) !important;
	border-radius: var(--ideapr-radius-sm) !important;
	padding: 10px 14px !important;
	background: #fff !important;
	transition: border-color .15s ease, background .15s ease !important;
}

.ideapr-wrapper .ideapr-field-file .ideapr-file-upload-shell:hover {
	border-color: var(--ideapr-primary) !important;
	background: #f8f7ff !important;
}

.ideapr-wrapper input.ideapr-file-upload {
	width: 100% !important;
	max-width: 100% !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
	font-size: 13px !important;
	color: var(--ideapr-text-muted) !important;
}

.ideapr-wrapper input.ideapr-file-upload::file-selector-button {
	border: none !important;
	border-radius: 999px !important;
	padding: 7px 16px !important;
	margin-right: 12px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #fff !important;
	background: var(--ideapr-gradient) !important;
	cursor: pointer !important;
	transition: opacity .15s ease !important;
}

.ideapr-wrapper input.ideapr-file-upload::file-selector-button:hover {
	opacity: .9 !important;
}

/* Checkbox field — custom-styled toggle so the checkmark renders
   consistently (and centered) across every browser, unlike native
   ::after pseudo-elements on <input> which Firefox doesn't support. */
.ideapr-wrapper .ideapr-field-checkbox {
	display: flex !important;
	align-items: center !important;
}

.ideapr-wrapper .ideapr-field-checkbox .ideapr-field-label {
	margin: 0 !important;
	cursor: pointer !important;
}

.ideapr-wrapper .ideapr-checkbox-shell {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid var(--ideapr-border) !important;
	border-radius: var(--ideapr-radius-sm) !important;
	background: #fff !important;
	cursor: pointer !important;
	margin: 0 !important;
}

.ideapr-wrapper .ideapr-checkbox-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.ideapr-wrapper .ideapr-checkbox-visual {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 19px !important;
	width: 19px !important;
	height: 19px !important;
	border: 1.5px solid var(--ideapr-border) !important;
	border-radius: 5px !important;
	background: #fff !important;
	transition: border-color .15s ease, background .15s ease !important;
}

.ideapr-wrapper .ideapr-checkbox-visual::after {
	content: "" !important;
	width: 5px !important;
	height: 9px !important;
	margin-top: -2px !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	transform: rotate(45deg) !important;
	opacity: 0 !important;
}

.ideapr-wrapper .ideapr-checkbox-native:checked + .ideapr-checkbox-visual {
	background: var(--ideapr-gradient) !important;
	border-color: transparent !important;
}

.ideapr-wrapper .ideapr-checkbox-native:checked + .ideapr-checkbox-visual::after {
	opacity: 1 !important;
}

.ideapr-wrapper .ideapr-checkbox-native:focus + .ideapr-checkbox-visual {
	box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.18) !important;
}

@media (max-width: 480px) {
	.ideapr-wrapper.ideapr-product-requirements {
		padding: 16px !important;
	}
	.ideapr-wrapper .ideapr-requirements-fields {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Select2 premium dropdown (frontend "Select" fields) ---------- */

.ideapr-wrapper .select2-container.ideapr-select2-container {
	width: 100% !important;
}

.ideapr-wrapper .select2-container .select2-selection--single {
	height: auto !important;
	border: 1px solid var(--ideapr-border) !important;
	border-radius: var(--ideapr-radius-sm) !important;
	padding: 10px 13px !important;
	background: #fff !important;
	display: flex !important;
	align-items: center !important;
}

.ideapr-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	line-height: 1.4 !important;
	font-size: 13.5px !important;
	color: var(--ideapr-text) !important;
}

.ideapr-wrapper .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 10px !important;
}

.ideapr-wrapper .select2-container--open .select2-selection--single {
	border-color: var(--ideapr-primary) !important;
	box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.14) !important;
}

.ideapr-select2-dropdown {
	border: 1px solid var(--ideapr-border) !important;
	border-radius: var(--ideapr-radius-sm) !important;
	overflow: hidden !important;
	box-shadow: 0 12px 28px rgba(17, 24, 39, 0.12) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.ideapr-select2-dropdown .select2-results__option {
	padding: 9px 14px !important;
	font-size: 13.5px !important;
}

.ideapr-select2-dropdown .select2-results__option--highlighted[aria-selected] {
	background: var(--ideapr-gradient) !important;
	color: #fff !important;
}

.ideapr-select2-dropdown .select2-results__option[aria-selected="true"] {
	background: #f1eefd !important;
	color: var(--ideapr-primary-dark) !important;
}

/* ---------- Cart / checkout item data fallback ---------- */

.ideapr-wrapper.ideapr-cart-item-data {
	display: block !important;
	width: auto !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}

.ideapr-wrapper.ideapr-cart-item-data::before {
	display: none !important;
}

.ideapr-cart-item-data-row {
	font-size: 12.5px !important;
	line-height: 1.6 !important;
	color: var(--ideapr-text-muted) !important;
}

.ideapr-cart-item-data-row strong {
	color: var(--ideapr-text) !important;
	font-weight: 600 !important;
}