/**
 * DineSync Modifier Frontend Styles
 *
 * Minimal styling that inherits theme fonts.
 * Uses CSS custom properties for easy theme overrides.
 *
 * @package DineSync_For_Clover
 */

:root {
	--dinesync-mod-border: #ddd;
	--dinesync-mod-bg: #fafafa;
	--dinesync-mod-bg-hover: #f0f0f0;
	--dinesync-mod-bg-selected: #f0f7ff;
	--dinesync-mod-border-selected: #2271b1;
	--dinesync-mod-radius: 6px;
	--dinesync-mod-gap: 10px;
	--dinesync-mod-required-color: #d63638;
	--dinesync-mod-price-color: #666;
	--dinesync-mod-header-size: 1em;
}

/* Container */
.dinesync-modifiers {
	margin: 1.5em 0;
}

/* Group */
.dinesync-modifier-group {
	border: 1px solid var(--dinesync-mod-border);
	border-radius: var(--dinesync-mod-radius);
	padding: 16px;
	margin-bottom: 16px;
}

.dinesync-modifier-group:last-child {
	margin-bottom: 0;
}

/* Group Header */
.dinesync-modifier-group-header {
	margin-bottom: 12px;
	line-height: 1.4;
}

.dinesync-modifier-group-name {
	font-weight: 600;
	font-size: var(--dinesync-mod-header-size);
}

.dinesync-modifier-required {
	color: var(--dinesync-mod-required-color);
	font-size: 0.85em;
	font-weight: 400;
}

.dinesync-modifier-max {
	color: var(--dinesync-mod-price-color);
	font-size: 0.85em;
	font-weight: 400;
}

/* Options Grid */
.dinesync-modifier-options {
	display: flex;
	flex-direction: column;
	gap: var(--dinesync-mod-gap);
}

/* Option Label */
.dinesync-modifier-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--dinesync-mod-bg);
	border: 1px solid var(--dinesync-mod-border);
	border-radius: var(--dinesync-mod-radius);
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
	font-size: 0.95em;
	line-height: 1.3;
}

.dinesync-modifier-option:hover {
	background: var(--dinesync-mod-bg-hover);
}

/* Selected state */
.dinesync-modifier-option.dinesync-selected {
	background: var(--dinesync-mod-bg-selected);
	border-color: var(--dinesync-mod-border-selected);
}

/* Input */
.dinesync-modifier-input {
	flex-shrink: 0;
	margin: 0;
	width: 18px;
	height: 18px;
	accent-color: var(--dinesync-mod-border-selected);
}

/* Label Text */
.dinesync-modifier-label {
	flex: 1;
	cursor: pointer;
}

/* Price */
.dinesync-modifier-price {
	color: var(--dinesync-mod-price-color);
	margin-left: 4px;
	white-space: nowrap;
}

/* Validation error state */
.dinesync-modifier-group.dinesync-error {
	border-color: var(--dinesync-mod-required-color);
}

.dinesync-modifier-group.dinesync-error .dinesync-modifier-group-name {
	color: var(--dinesync-mod-required-color);
}

/* Price update display */
.dinesync-price-updated {
	transition: color 0.2s;
}

/* Responsive */
@media screen and (min-width: 600px) {
	.dinesync-modifier-options {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}