/**
 * PriceBlueprint Frontend Styles
 *
 * @package PriceBlueprint
 */

/* --------------------------------------------------------------------------
   Configurator wrapper
   -------------------------------------------------------------------------- */
.prbp-configurator {
	margin: 20px 0;
}

.prbp-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* --------------------------------------------------------------------------
   Attribute groups
   -------------------------------------------------------------------------- */
.prbp-attribute-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.prbp-attribute-label {
	font-weight: 600;
	font-size: 14px;
}

/* Wrapper carries all visual styling so Safari's padding limitation doesn't apply. */
.prbp-select-wrapper {
	position: relative;
	max-width: 360px;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
}

.prbp-select-wrapper::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #555;
	pointer-events: none;
}

.prbp-select-wrapper.prbp-select--error {
	border-color: #d63638;
}

.prbp-attribute-select {
	appearance: none;
	-webkit-appearance: none;
	padding: 8px 32px 8px 12px;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	background: transparent;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
	outline: none;
}

.prbp-field-error {
	color: #d63638;
	font-size: 12px;
	min-height: 16px;
}


/* --------------------------------------------------------------------------
   Price loader — 3 bouncing dots
   -------------------------------------------------------------------------- */
.prbp-loader {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 1em;
	vertical-align: middle;
}

.prbp-loader span {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: prbp-dot-bounce 1s ease-in-out infinite;
}

.prbp-loader span:nth-child(1) { animation-delay: 0s; }
.prbp-loader span:nth-child(2) { animation-delay: 0.18s; }
.prbp-loader span:nth-child(3) { animation-delay: 0.36s; }

@keyframes prbp-dot-bounce {
	0%, 80%, 100% { transform: translateY( 0 ); }
	40%            { transform: translateY( -8px ); }
}

/* --------------------------------------------------------------------------
   Add to cart button
   -------------------------------------------------------------------------- */
.prbp-add-to-cart {
	align-self: flex-start;
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Classic cart: hide the empty <dt> (stray colon) produced when key is ''
   -------------------------------------------------------------------------- */
dt.variation- {
	display: none;
}

/* --------------------------------------------------------------------------
   No-rules notice
   -------------------------------------------------------------------------- */
.prbp-no-rules {
	color: #646970;
	font-style: italic;
	margin: 16px 0;
}