/*
 * OrderCraft front-end styles — deliberately theme-neutral (no dependency
 * on any theme's CSS custom properties or grid classes) so the form looks
 * consistent no matter which WooCommerce theme it's installed on top of.
 */

.oc-pdp-form {
	display: flex;
	flex-direction: column;
	gap: 1.1em;
	margin: 1.25em 0;
	padding: 1.1em 1.25em;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.015);
	max-width: 560px;
}

.oc-field {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}

.oc-field label {
	font-weight: 600;
	font-size: 0.95em;
}

.oc-field input[type="date"],
.oc-field textarea,
.oc-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65em 0.8em;
	min-height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	font: inherit;
}

.oc-field textarea {
	min-height: 88px;
	resize: vertical;
}

.oc-required {
	color: #c0392b;
}

.oc-delivery-countdown {
	margin: 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.oc-delivery-countdown.oc-urgent {
	color: #c0392b;
	font-weight: 600;
	opacity: 1;
}

.oc-occasion-picks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin-bottom: 0.3em;
}

.oc-occasion-chip {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: #fff;
	border-radius: 999px;
	padding: 0.4em 0.9em;
	min-height: 36px;
	font-size: 0.85em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.oc-occasion-chip:hover,
.oc-occasion-chip.is-active {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.35);
}

.oc-char-counter {
	margin: 0;
	font-size: 0.8em;
	opacity: 0.65;
	text-align: end;
}

.oc-addon-group {
	border: none;
	padding: 0;
	margin: 0 0 0.6em;
}

.oc-addon-group legend {
	font-weight: 600;
	padding: 0 0 0.35em;
}

.oc-addon-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-height: 44px;
	padding: 0.3em 0;
	cursor: pointer;
}

.oc-addon-option input {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.oc-addon-label {
	flex: 1 1 auto;
}

.oc-addon-price {
	font-weight: 600;
	white-space: nowrap;
}

.oc-field-substitution label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
	cursor: pointer;
}

.oc-field-substitution input {
	margin-top: 0.2em;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.oc-price-preview {
	margin: 0;
	padding-top: 0.6em;
	border-top: 1px dashed rgba(0, 0, 0, 0.15);
	font-size: 1.05em;
}

@media (max-width: 480px) {
	.oc-pdp-form {
		max-width: 100%;
		padding: 1em;
	}
}

/*
 * Some caching/optimization plugins (observed with WP Rocket's Automatic
 * Lazy Rendering) mark fixed/off-screen-looking elements content-invisible
 * on mobile even when they're inside the normal document flow. The form
 * itself isn't fixed-position, but this guard costs nothing and prevents
 * the same class of bug from ever hiding it.
 */
.oc-pdp-form[data-wpr-lazyrender] {
	content-visibility: visible !important;
}