.ppb-photo-widget {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 22px 0;
}

.ppb-photo-widget-attribute-label {
	display: block;
	margin-bottom: 8px;
}

.ppb-photo-widget-attribute-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * Chip appearance (padding/border/radius/font/active-state color) lives in
 * the theme's `.ppb-variation-chip` / `.ppb-variation-chip-label` rules —
 * shared with WooCommerce's native variation-selector chips so both look
 * identical (see printpanther/style.css). Only layout-only concerns stay
 * here since they don't apply to the native component.
 */
.ppb-photo-widget-chip {
	cursor: pointer;
}

.ppb-photo-widget-upload label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
}

.ppb-photo-widget-input {
	display: block;
	font-size: 14px;
	color: #6b6259;
}

.ppb-photo-widget-input::file-selector-button {
	background: #000;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 20px;
	margin-right: 12px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.ppb-photo-widget-hint {
	display: block;
	font-size: 12px;
	color: #6b6259;
	margin-top: 8px;
}

.ppb-photo-widget-hint.is-error {
	color: #c0392b;
}

.ppb-photo-widget-preview {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.ppb-photo-widget-preview-item {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	background: #f3f2ed;
	border: 1px solid #9a9a9a45;
}

.woocommerce .ppb-photo-widget-preview-item img,
.woocommerce-page .ppb-photo-widget-preview-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ppb-photo-widget-text label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
}

.ppb-photo-widget-text-input {
	display: block;
	width: 100%;
	max-width: 420px;
	font-family: inherit;
	font-size: 14px;
	padding: 10px 14px;
	border: 1px solid #9a9a9a45;
	border-radius: 10px;
	background: #fff;
}

.ppb-photo-widget-remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	line-height: 18px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
}

/*
 * theme.json's `core/button` style (the box-shadow every other button on
 * the site gets) only applies to actual Gutenberg button block instances —
 * since this is a hand-authored <button>, it doesn't inherit that
 * automatically despite carrying the same `wp-block-button__link` class,
 * so the shadow has to be set explicitly to match.
 */
.ppb-photo-widget-submit {
	align-self: flex-start;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}

.ppb-photo-widget-submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	box-shadow: none;
}

/*
 * The theme's global `.wp-block-button__link:hover { transform: translateY(-3px); }`
 * rule (style.css) still applies here since this button carries that class
 * for its base button styling — reset it specifically while disabled so a
 * button the customer can't actually click doesn't still lift on hover.
 */
.ppb-photo-widget-submit:disabled:hover {
	transform: none;
}

.ppb-photo-widget-message {
	display: block;
	font-size: 13px;
}

.ppb-photo-widget-message.is-error {
	color: #c0392b;
}

.ppb-order-item-photo {
	margin-top: 6px;
}

.ppb-order-item-photo img {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid #9a9a9a45;
}

.ppb-order-item-text {
	margin-top: 6px;
	font-size: 13px;
}