/**
 * SB Restaurants Components CSS
 * Material UI-inspired component styles
 *
 * @package SB_Restaurants
 */

/* ============================================
   CSS Variables & Theme Colors
   ============================================ */
:root {
	--sb-color-primary: #2271b1;
	--sb-color-secondary: #135e96;
	--sb-color-error: #d63638;
	--sb-color-warning: #dba617;
	--sb-color-success: #00a32a;
	--sb-color-dark: #1d2327;
	--sb-color-light: #f0f0f1;
	
	--sb-spacing-xs: 4px;
	--sb-spacing-sm: 8px;
	--sb-spacing-md: 16px;
	--sb-spacing-lg: 24px;
	--sb-spacing-xl: 32px;
	
	--sb-border-radius-sm: 4px;
	--sb-border-radius-md: 8px;
	--sb-border-radius-lg: 12px;
	
	--sb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--sb-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--sb-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	--sb-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
	
	--sb-transition: all 0.2s ease-in-out;
}

/* ============================================
   Button Component
   ============================================ */
.sb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sb-spacing-sm);
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: var(--sb-border-radius-sm);
	cursor: pointer;
	transition: var(--sb-transition);
	text-decoration: none;
	position: relative;
	overflow: hidden;
}

.sb-button:focus {
	outline: none;
}

/* Button Variants */
.sb-button--contained {
	background-color: var(--sb-color-primary);
	color: #fff;
	box-shadow: var(--sb-shadow-sm);
}

.sb-button--contained:hover:not(:disabled) {
	box-shadow: var(--sb-shadow-md);
	transform: translateY(-1px);
}

.sb-button--outlined {
	background-color: transparent;
	color: var(--sb-color-primary);
	border-color: var(--sb-color-primary);
}

.sb-button--outlined:hover:not(:disabled) {
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.sb-button--link {
	background-color: transparent;
	color: var(--sb-color-primary);
	text-decoration: underline;
}

.sb-button--link:hover:not(:disabled) {
	text-decoration: none;
	background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Button Colors */
.sb-button--primary {
	--sb-button-color: var(--sb-color-primary);
}

/* Light Color Variants */
.sb-button--success-light.sb-button--contained {
	background-color: rgba(0, 163, 42, 0.1);
	color: var(--sb-color-success);
	border-color: transparent;
}

.sb-button--success-light.sb-button--contained:hover:not(:disabled) {
	background-color: rgba(0, 163, 42, 0.15);
}

.sb-button--error-light.sb-button--contained {
	background-color: rgba(214, 54, 56, 0.1);
	color: var(--sb-color-error);
	border-color: transparent;
}

.sb-button--error-light.sb-button--contained:hover:not(:disabled) {
	background-color: rgba(214, 54, 56, 0.15);
}

.sb-button--warning-light.sb-button--contained {
	background-color: rgba(219, 166, 23, 0.1);
	color: var(--sb-color-warning);
	border-color: transparent;
}

.sb-button--warning-light.sb-button--contained:hover:not(:disabled) {
	background-color: rgba(219, 166, 23, 0.15);
}

.sb-button--primary-light.sb-button--contained {
	background-color: rgba(34, 113, 177, 0.1);
	color: var(--sb-color-primary);
	border-color: transparent;
}

.sb-button--primary-light.sb-button--contained:hover:not(:disabled) {
	background-color: rgba(34, 113, 177, 0.15);
}

.sb-button--secondary-light.sb-button--contained {
	background-color: rgba(19, 94, 150, 0.1);
	color: var(--sb-color-secondary);
	border-color: transparent;
}

.sb-button--secondary-light.sb-button--contained:hover:not(:disabled) {
	background-color: rgba(19, 94, 150, 0.15);
}

.sb-button--light.sb-button--outlined {
	border-color: currentColor;
	background-color: transparent;
}

.sb-button--light.sb-button--outlined:hover:not(:disabled) {
	background-color: rgba(0, 0, 0, 0.04);
}

.sb-button--secondary {
	--sb-button-color: var(--sb-color-secondary);
}

.sb-button--error {
	--sb-button-color: var(--sb-color-error);
}

.sb-button--warning {
	--sb-button-color: var(--sb-color-warning);
}

.sb-button--success {
	--sb-button-color: var(--sb-color-success);
}

.sb-button--dark {
	--sb-button-color: var(--sb-color-dark);
}

.sb-button--contained.sb-button--primary {
	background-color: var(--sb-color-primary);
}

.sb-button--contained.sb-button--secondary {
	background-color: var(--sb-color-secondary);
}

.sb-button--contained.sb-button--error {
	background-color: var(--sb-color-error);
}

.sb-button--contained.sb-button--warning {
	background-color: var(--sb-color-warning);
}

.sb-button--contained.sb-button--success {
	background-color: var(--sb-color-success);
}

.sb-button--contained.sb-button--dark {
	background-color: var(--sb-color-dark);
}

.sb-button--outlined.sb-button--primary,
.sb-button--link.sb-button--primary {
	color: var(--sb-color-primary);
	border-color: var(--sb-color-primary);
}

.sb-button--outlined.sb-button--secondary,
.sb-button--link.sb-button--secondary {
	color: var(--sb-color-secondary);
	border-color: var(--sb-color-secondary);
}

.sb-button--outlined.sb-button--error,
.sb-button--link.sb-button--error {
	color: var(--sb-color-error);
	border-color: var(--sb-color-error);
}

.sb-button--outlined.sb-button--warning,
.sb-button--link.sb-button--warning {
	color: var(--sb-color-warning);
	border-color: var(--sb-color-warning);
}

.sb-button--outlined.sb-button--success,
.sb-button--link.sb-button--success {
	color: var(--sb-color-success);
	border-color: var(--sb-color-success);
}

.sb-button--outlined.sb-button--dark,
.sb-button--link.sb-button--dark {
	color: var(--sb-color-dark);
	border-color: var(--sb-color-dark);
}

/* Button Sizes */
.sb-button--small {
	padding: var(--sb-spacing-xs) var(--sb-spacing-sm);
	font-size: 12px;
	min-height: 32px;
	height: 32px;
}

.sb-button--medium {
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
	font-size: 14px;
	min-height: 38px;
	height: 38px;
}

.sb-button--large {
	padding: var(--sb-spacing-md) var(--sb-spacing-lg);
	font-size: 16px;
	min-height: 44px;
	height: 44px;
}

.sb-button--full-width {
	width: 100%;
}

.sb-button--disabled,
.sb-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

.sb-button__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	width: 20px;
	height: 20px;
	line-height: 1;
}

.sb-button--has-icon:not(.sb-button--icon-right) .sb-button__text {
	display: inline;
}

.sb-button--has-icon.sb-button--icon-right .sb-button__text {
	display: inline;
}

.sb-button--icon-left {
	flex-direction: row;
}

.sb-button--icon-right {
	flex-direction: row-reverse;
}

/* ============================================
   Card Component
   ============================================ */
.sb-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	transition: var(--sb-transition);
}

.sb-card--elevation-0 {
	box-shadow: none;
}

.sb-card--elevation-1 {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sb-card--elevation-2 {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sb-card--elevation-3 {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sb-card--elevation-4 {
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14), 0 6px 12px rgba(0, 0, 0, 0.12);
}

.sb-card--elevation-5 {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.14);
}

.sb-card--variant-outlined {
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sb-card--clickable {
	cursor: pointer;
}

.sb-card--clickable:hover {
	box-shadow: var(--sb-shadow-lg);
	transform: translateY(-2px);
}

.sb-card--padding-none {
	padding: 0;
}

.sb-card--padding-small .sb-card__title,
.sb-card--padding-small .sb-card__subtitle,
.sb-card--padding-small .sb-card__content,
.sb-card--padding-small .sb-card__footer {
	padding: var(--sb-spacing-sm);
}

.sb-card--padding-medium .sb-card__title,
.sb-card--padding-medium .sb-card__subtitle,
.sb-card--padding-medium .sb-card__content,
.sb-card--padding-medium .sb-card__footer {
	padding: var(--sb-spacing-md);
}

.sb-card--padding-large .sb-card__title,
.sb-card--padding-large .sb-card__subtitle,
.sb-card--padding-large .sb-card__content,
.sb-card--padding-large .sb-card__footer {
	padding: var(--sb-spacing-lg);
}

.sb-card__image {
	width: 100%;
	overflow: hidden;
}

.sb-card__image img {
	width: 100%;
	height: auto;
	display: block;
}

.sb-card__title {
	font-size: 20px;
	font-weight: 500;
	margin: 0;
}

.sb-card__subtitle {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	margin-top: var(--sb-spacing-xs);
}

.sb-card__content {
	font-size: 14px;
	line-height: 1.6;
}

.sb-card__footer {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	gap: var(--sb-spacing-sm);
}

/* ============================================
   Input Component
   ============================================ */
.sb-input-wrapper {
	margin-bottom: var(--sb-spacing-md);
}

.sb-input-wrapper--no-margin {
	margin-bottom: 0;
}

.sb-input__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.87);
}

.sb-input__required {
	color: var(--sb-color-error);
	margin-left: 2px;
}

.sb-input {
	width: 100%;
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.87);
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-sm);
	transition: var(--sb-transition);
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
}

/* Ensure select elements match input height and padding */
select.sb-input {
	min-height: 40px;
	height: 40px;
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
}

/* Textarea styling */
textarea.sb-input,
.sb-input--textarea {
	min-height: auto;
	height: auto;
	resize: vertical;
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
	font-family: inherit;
}

.sb-input:focus {
	outline: none;
	border-color: var(--sb-color-primary);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.sb-input:disabled {
	background-color: rgba(0, 0, 0, 0.05);
	cursor: not-allowed;
	opacity: 0.6;
}

.sb-input-wrapper--error .sb-input {
	border-color: var(--sb-color-error);
}

.sb-input-wrapper--error .sb-input:focus {
	border-color: var(--sb-color-error);
	box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.2);
}

.sb-input-wrapper--success .sb-input {
	border-color: var(--sb-color-success);
}

.sb-input-wrapper--success .sb-input:focus {
	border-color: var(--sb-color-success);
	box-shadow: 0 0 0 2px rgba(0, 163, 42, 0.2);
}

.sb-input__description {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
}

.sb-input__error {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: var(--sb-color-error);
}

.sb-input__success {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: var(--sb-color-success);
}

/* Password Toggle */
.sb-input-wrapper {
	position: relative;
}

.sb-input__password-toggle {
	position: absolute;
	right: var(--sb-spacing-sm);
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--sb-spacing-xs);
	display: flex;
	align-items: center;
	justify-content: center;
}

.sb-input__password-toggle:hover {
	opacity: 0.7;
}

/* Price Input */
.sb-input-wrapper--price {
	position: relative;
}

.sb-input__price-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.sb-input__prefix,
.sb-input__suffix {
	padding: var(--sb-spacing-sm);
	color: rgba(0, 0, 0, 0.6);
	font-size: 14px;
	white-space: nowrap;
}

.sb-input__prefix {
	border-right: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-sm) 0 0 var(--sb-border-radius-sm);
	background-color: rgba(0, 0, 0, 0.02);
}

.sb-input__suffix {
	border-left: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: 0 var(--sb-border-radius-sm) var(--sb-border-radius-sm) 0;
	background-color: rgba(0, 0, 0, 0.02);
}

.sb-input--price {
	flex: 1;
}

.sb-input--price:has(+ .sb-input__suffix) {
	border-radius: var(--sb-border-radius-sm) 0 0 var(--sb-border-radius-sm);
}

.sb-input--price:has(~ .sb-input__prefix) {
	border-radius: 0 var(--sb-border-radius-sm) var(--sb-border-radius-sm) 0;
}

/* ============================================
   Radio Group Component
   ============================================ */
.sb-radio-group {
	margin-bottom: var(--sb-spacing-md);
}

.sb-radio-group__label {
	font-size: 14px;
	font-weight: 500;
	margin-bottom: var(--sb-spacing-sm);
	color: rgba(0, 0, 0, 0.87);
}

.sb-radio-group__required {
	color: var(--sb-color-error);
	margin-left: 2px;
}

.sb-radio-group__options {
	display: flex;
	flex-direction: column;
	gap: var(--sb-spacing-sm);
}

.sb-radio-group--inline .sb-radio-group__options {
	flex-direction: row;
	flex-wrap: wrap;
}

.sb-radio-group--button .sb-radio-group__options {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	align-items: center;
}

.sb-radio-group__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sb-spacing-sm);
}

.sb-radio-group--button .sb-radio-group__item {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	gap: 0;
}

.sb-radio-group--inline .sb-radio-group__item {
	display: inline-flex;
	margin-right: var(--sb-spacing-md);
}

.sb-radio-group__input {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	cursor: pointer;
	flex-shrink: 0;
}

.sb-radio-group__item-label {
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}

.sb-radio-group__item-description {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
	margin-top: var(--sb-spacing-xs);
}

/* Button Style Radio */
.sb-radio-group__item--button {
	position: relative;
}

.sb-radio-group__item--button .sb-radio-group__input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}

.sb-radio-group__item--button .sb-radio-group__item-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 16px;
	border: 1px solid #fff;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.04);
	box-shadow: 0px 4px 9px 1px rgba(0, 0, 0, 0.08);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	min-height: 38px;
	line-height: 1;
	color: rgba(0, 0, 0, 0.87);
}

/* Radio Group Sizes */
.sb-radio-group--size-sm .sb-radio-group__item--button .sb-radio-group__item-label {
	padding: 4px 12px;
	font-size: 13px;
	min-height: 28px;
}

.sb-radio-group--size-md .sb-radio-group__item--button .sb-radio-group__item-label {
	padding: 6px 16px;
	font-size: 14px;
	min-height: 38px;
}

.sb-radio-group--size-lg .sb-radio-group__item--button .sb-radio-group__item-label {
	padding: 8px 20px;
	font-size: 15px;
	min-height: 44px;
}

.sb-radio-group__item--button .sb-radio-group__input:checked + .sb-radio-group__item-label {
	background-color: rgba(238, 166, 43, 0.15) !important;
	color: #eea62b !important;
	border: 1px solid rgba(238, 166, 43, 0.3) !important;
	box-shadow: none !important;
	transform: none !important;
	scale: 1 !important;
}

.sb-radio-group__item--button:hover .sb-radio-group__item-label {
	border-color: #eea62b !important;
	box-shadow: none !important;
	transform: none !important;
	scale: 1 !important;
}

.sb-radio-group__item--button .sb-radio-group__item-label:hover {
	border-color: #eea62b !important;
	box-shadow: none !important;
	transform: none !important;
	scale: 1 !important;
}

.sb-radio-group__item--button:hover .sb-radio-group__input:not(:checked) + .sb-radio-group__item-label {
	border-color: #eea62b !important;
}

.sb-radio-group__item--button:hover .sb-radio-group__input:checked + .sb-radio-group__item-label {
	border-color: #eea62b !important;
}

.sb-radio-group__item--button .sb-radio-group__input:focus + .sb-radio-group__item-label {
	outline: none;
}

.sb-radio-group__description {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
}

.sb-radio-group__error {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: var(--sb-color-error);
}

.sb-radio-group--error .sb-radio-group__input {
	border-color: var(--sb-color-error);
}

/* ============================================
   Toggle Switch Component
   ============================================ */
.sb-toggle-wrapper {
	display: flex;
	align-items: center;
	gap: var(--sb-spacing-sm);
	margin-bottom: var(--sb-spacing-md);
	cursor: pointer;
}

/* Toggle label positioning */
.sb-toggle-wrapper--label-left {
	flex-direction: column;
	align-items: flex-start;
}

.sb-toggle-label-toggle-row {
	display: flex;
	align-items: center;
	gap: var(--sb-spacing-sm);
	width: 100%;
	margin-bottom: 0;
}

.sb-toggle-description-row {
	width: 100%;
	margin-top: var(--sb-spacing-xs);
}

.sb-toggle-wrapper--label-left .sb-toggle__description {
	margin: 0;
	width: 100%;
}

.sb-toggle-wrapper--label-right {
	flex-direction: row-reverse;
	align-items: center;
}

.sb-toggle-wrapper--label-top {
	flex-direction: column;
	align-items: flex-start;
}

.sb-toggle-wrapper--label-top .sb-toggle__label-text {
	margin-bottom: 8px;
	order: 1;
}

.sb-toggle-wrapper--label-top .sb-toggle {
	order: 3;
}

.sb-toggle-wrapper--label-top .sb-toggle__description {
	order: 2;
	margin-top: 0;
	margin-bottom: 8px;
}

.sb-toggle {
	position: relative;
	display: inline-block;
	cursor: pointer;
	width: auto;
	height: auto;
}

.sb-toggle__input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: auto;
}

.sb-toggle label {
	position: relative;
	display: inline-block;
	cursor: pointer;
	z-index: 1;
	pointer-events: auto;
	width: 100%;
	height: 100%;
}

.sb-toggle__slider {
	position: relative;
	display: block;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 34px;
	transition: var(--sb-transition);
	border: 1px solid #fff;
	box-shadow: 
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 2px 4px rgba(0, 0, 0, 0.2),
		inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.sb-toggle__slider:before {
	content: "";
	position: absolute;
	background-color: #fff;
	border-radius: 50%;
	transition: var(--sb-transition);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sb-toggle__input:checked + label .sb-toggle__slider {
	background-color: rgba(76, 175, 80, 0.25);
	border-color: #fff;
	box-shadow: 
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 2px 4px rgba(0, 0, 0, 0.2),
		inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.sb-toggle__input:checked + label .sb-toggle__slider:before {
	background-color: #fff;
	transform: translateX(calc(100% - 2px));
}

.sb-toggle__input:focus + label .sb-toggle__slider {
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.sb-toggle--small .sb-toggle__slider {
	width: 32px;
	height: 18px;
}

.sb-toggle--small .sb-toggle__slider:before {
	width: 14px;
	height: 14px;
	left: 2px;
	top: 2px;
}

.sb-toggle--small .sb-toggle__input:checked + label .sb-toggle__slider:before {
	transform: translateX(calc(32px - 14px - 2px));
}

.sb-toggle--small .sb-toggle__input:not(:checked) + label .sb-toggle__slider:before {
	transform: translateX(0);
}

.sb-toggle--medium .sb-toggle__slider {
	width: 38px;
	height: 20px;
}

.sb-toggle--medium .sb-toggle__slider:before {
	width: 16px;
	height: 16px;
	left: 2px;
	top: 2px;
}

.sb-toggle--medium .sb-toggle__input:checked + label .sb-toggle__slider:before {
	transform: translateX(calc(38px - 16px - 2px));
}

.sb-toggle--medium .sb-toggle__input:not(:checked) + label .sb-toggle__slider:before {
	transform: translateX(0);
}

.sb-toggle--large .sb-toggle__slider {
	width: 44px;
	height: 22px;
}

.sb-toggle--large .sb-toggle__slider:before {
	width: 18px;
	height: 18px;
	left: 2px;
	top: 2px;
}

.sb-toggle--large .sb-toggle__input:checked + label .sb-toggle__slider:before {
	transform: translateX(calc(44px - 18px - 2px));
}

.sb-toggle--large .sb-toggle__input:not(:checked) + label .sb-toggle__slider:before {
	transform: translateX(0);
}

.sb-toggle--primary .sb-toggle__input:checked + label .sb-toggle__slider {
	background-color: var(--sb-color-success);
}

.sb-toggle--secondary .sb-toggle__input:checked + label .sb-toggle__slider {
	background-color: var(--sb-color-success);
}

.sb-toggle--success .sb-toggle__input:checked + label .sb-toggle__slider {
	background-color: var(--sb-color-success);
}

.sb-toggle--error .sb-toggle__input:checked + label .sb-toggle__slider {
	background-color: var(--sb-color-success);
}

.sb-toggle--warning .sb-toggle__input:checked + label .sb-toggle__slider {
	background-color: var(--sb-color-success);
}

.sb-toggle-wrapper--disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.sb-toggle-wrapper--disabled .sb-toggle__input {
	cursor: not-allowed;
}

.sb-toggle__label-text {
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}

.sb-toggle__description {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
}

/* ============================================
   Tooltip Component
   ============================================ */
.sb-tooltip-container {
	position: relative;
	display: inline-block;
}

.sb-tooltip {
	position: absolute;
	z-index: 1000;
	padding: var(--sb-spacing-xs) var(--sb-spacing-sm);
	background-color: rgba(0, 0, 0, 0.87);
	color: #fff;
	font-size: 12px;
	border-radius: var(--sb-border-radius-sm);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}

.sb-tooltip--visible {
	opacity: 1;
}

/* Tooltip fallback (works even if JS fails) */
.sb-tooltip-container:hover .sb-tooltip,
.sb-tooltip-container:focus-within .sb-tooltip{
	opacity: 1;
}

.sb-tooltip--top {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: var(--sb-spacing-xs);
}

.sb-tooltip--bottom {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: var(--sb-spacing-xs);
}

.sb-tooltip--left {
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-right: var(--sb-spacing-xs);
}

.sb-tooltip--right {
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: var(--sb-spacing-xs);
}

.sb-tooltip--has-arrow:before {
	content: "";
	position: absolute;
	border: 4px solid transparent;
}

.sb-tooltip--top.sb-tooltip--has-arrow:before {
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-top-color: rgba(0, 0, 0, 0.87);
}

.sb-tooltip--bottom.sb-tooltip--has-arrow:before {
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom-color: rgba(0, 0, 0, 0.87);
}

.sb-tooltip--left.sb-tooltip--has-arrow:before {
	right: -8px;
	top: 50%;
	transform: translateY(-50%);
	border-left-color: rgba(0, 0, 0, 0.87);
}

.sb-tooltip--right.sb-tooltip--has-arrow:before {
	left: -8px;
	top: 50%;
	transform: translateY(-50%);
	border-right-color: rgba(0, 0, 0, 0.87);
}

/* ============================================
   Modal Component
   ============================================ */
.sb-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}

.sb-modal-backdrop--visible {
	opacity: 1;
	pointer-events: auto;
}

.sb-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease-in-out;
}

.sb-modal[style*="display: flex"],
.sb-modal[style*="display:flex"] {
	display: flex !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.sb-modal--visible {
	display: flex;
	opacity: 1;
	pointer-events: auto;
}

/* JS-free target modals (used by menu allergy chips) */
.sb-modal--target:target{
	display:flex !important;
	opacity:1 !important;
	pointer-events:auto !important;
}
.sb-modal--target:target .sb-modal__dialog{
	transform:scale(1);
}
.sb-modal-backdrop--target{
	opacity:0;
	pointer-events:none;
}
.sb-modal--target:target + .sb-modal-backdrop--target{
	opacity:1;
	pointer-events:auto;
}

.sb-modal--centered {
	align-items: center;
	justify-content: center;
}

.sb-modal__dialog {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.1);
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	transform: scale(0.9);
	transition: transform 0.3s ease-in-out;
	position: relative;
	z-index: 10001 !important;
}

.sb-modal--visible .sb-modal__dialog {
	transform: scale(1);
}

.sb-modal--small .sb-modal__dialog {
	width: 400px;
}

.sb-modal--medium .sb-modal__dialog {
	width: 600px;
}

.sb-modal--large .sb-modal__dialog {
	width: 900px;
}

.sb-modal--fullscreen .sb-modal__dialog {
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	border-radius: 0;
}

.sb-modal--scrollable .sb-modal__body {
	overflow-y: auto;
	max-height: calc(90vh - 120px);
}

.sb-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sb-spacing-md) var(--sb-spacing-lg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.sb-modal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
}

.sb-modal__close {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	padding: var(--sb-spacing-xs);
	color: rgba(0, 0, 0, 0.6);
	transition: var(--sb-transition);
}

.sb-modal__close:hover {
	color: rgba(0, 0, 0, 0.87);
}

.sb-modal__body {
	padding: var(--sb-spacing-lg);
}

.sb-modal__footer {
	padding: var(--sb-spacing-md) var(--sb-spacing-lg);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--sb-spacing-sm);
}

/* Confirmation Modal */
.sb-confirm-modal__actions {
	display: flex;
	gap: var(--sb-spacing-sm);
	justify-content: flex-end;
}

/* Alert Modal */
.sb-alert-modal__content {
	display: flex;
	align-items: flex-start;
	gap: var(--sb-spacing-md);
}

.sb-alert-modal__icon {
	font-size: 24px;
	flex-shrink: 0;
}

.sb-alert-modal__icon--info {
	color: var(--sb-color-primary);
}

.sb-alert-modal__icon--success {
	color: var(--sb-color-success);
}

.sb-alert-modal__icon--warning {
	color: var(--sb-color-warning);
}

.sb-alert-modal__icon--error {
	color: var(--sb-color-error);
}

.sb-alert-modal__message {
	flex: 1;
}

.sb-alert-modal__actions {
	display: flex;
	justify-content: flex-end;
}

/* Modal Animations */
.sb-modal--animation-fade .sb-modal__dialog {
	animation: fadeIn 0.3s ease-in-out;
}

.sb-modal--animation-slide .sb-modal__dialog {
	animation: slideUp 0.3s ease-in-out;
}

.sb-modal--animation-scale .sb-modal__dialog {
	animation: scaleIn 0.3s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes scaleIn {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* ============================================
   Admin Panel Specific Styles
   ============================================ */
body.wp-admin .sb-button--contained.sb-button--primary,
body.wp-admin .sb-button--outlined.sb-button--primary,
body.wp-admin .sb-button--link.sb-button--primary {
	--sb-button-color: #eea62b;
}

body.wp-admin .sb-button--contained.sb-button--primary {
	background-color: #eea62b;
	border-color: #eea62b;
}

body.wp-admin .sb-button--outlined.sb-button--primary {
	color: #eea62b;
	border-color: #eea62b;
}

body.wp-admin .sb-button--outlined.sb-button--primary:hover:not(:disabled) {
	background-color: rgba(238, 166, 43, 0.04);
}

body.wp-admin .sb-button--link.sb-button--primary {
	color: #eea62b;
}

body.wp-admin .sb-button--link.sb-button--primary:hover:not(:disabled) {
	background-color: rgba(238, 166, 43, 0.04);
}

/* Settings Page Layout Improvements */
.sb-restaurants-settings-section {
	margin-bottom: 30px;
}

.sb-restaurants-field-group {
	margin-bottom: 16px;
}

.sb-restaurants-nested-field {
	margin-bottom: 16px;
}

/* Color picker alignment */
.sb-color-picker {
	margin: 0;
	vertical-align: middle;
}

.sb-color-input .sb-input-wrapper {
	margin-bottom: 0 !important;
}

.sb-color-input .sb-input-wrapper .sb-input {
	height: 38px !important;
	min-height: 38px;
	box-sizing: border-box;
	margin: 0;
}

.sb-color-input input {
	height: 38px !important;
	min-height: 38px;
	box-sizing: border-box;
}

/* Reset button icon alignment */
.sb-reset-color {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0;
	vertical-align: middle;
}

/* Ensure proper vertical alignment for color fields */
div[style*="display: flex"][style*="align-items: center"] {
	align-items: center !important;
}

div[style*="display: flex"][style*="align-items: center"] > * {
	align-self: center;
}

/* Radio group button style - reduce vertical spacing */
.sb-radio-group--button {
	margin-bottom: 0;
}

.sb-radio-group--button .sb-radio-group__options {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	align-items: center;
}

.sb-radio-group--button .sb-radio-group__item {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
}

/* Radio Group Button Style Improvements */
.sb-radio-group--button .sb-radio-group__item--button .sb-radio-group__item-label {
	min-height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
}

/* Input height consistency */
.sb-input {
	min-height: 38px;
	box-sizing: border-box;
}

/* Card improvements for settings */
.sb-card__title {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 8px;
}

.sb-card__content {
	margin-top: 0;
}

/* Spacing improvements */
.sb-input-wrapper {
	margin-bottom: 16px;
}

/* Confirmation Modal Button Icons */
.sb-confirm-modal__confirm-btn .dashicons,
.sb-confirm-modal__cancel-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
	display: inline-block;
}

.sb-radio-group {
	margin-bottom: 16px;
}

.sb-toggle-wrapper {
	margin-bottom: 16px;
}

/* ============================================
   Date Picker Component
   ============================================ */
.sb-date-picker-wrapper {
	margin-bottom: var(--sb-spacing-md);
	position: relative;
}

.sb-date-picker-wrapper--error .sb-date-picker-input {
	border-color: var(--sb-color-error);
}

.sb-date-picker-wrapper--error .sb-date-picker-input:focus {
	border-color: var(--sb-color-error);
	box-shadow: 0 0 0 2px rgba(214, 54, 56, 0.2);
}

.sb-date-picker-wrapper--success .sb-date-picker-input {
	border-color: var(--sb-color-success);
}

.sb-date-picker-wrapper--success .sb-date-picker-input:focus {
	border-color: var(--sb-color-success);
	box-shadow: 0 0 0 2px rgba(0, 163, 42, 0.2);
}

.sb-date-picker__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.87);
}

.sb-date-picker__required {
	color: var(--sb-color-error);
	margin-left: 2px;
}

.sb-date-picker__input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sb-spacing-sm);
	overflow: visible;
}

.sb-date-picker__input-wrapper .sb-date-picker-input {
	flex: 1;
}

.sb-date-picker__input-wrapper .sb-date-picker {
	position: absolute;
	top: auto;
	bottom: auto;
	left: auto;
	right: auto;
	margin-top: 0;
	margin-bottom: 0;
	z-index: 10000;
	overflow: visible;
	max-width: calc(100vw - 20px);
	max-height: calc(100vh - 20px);
	white-space: nowrap;
}

/* Ensure picker is visible when near right edge - adjust to right if needed */
@media (max-width: 768px) {
	.sb-date-picker__input-wrapper .sb-date-picker {
		left: auto;
		right: 0;
	}
}

/* Smart positioning: if picker would overflow right, align to right */
.sb-date-picker__input-wrapper {
	overflow: visible;
}

/* Date picker input wrapper - whole area opens calendar */
.sb-date-picker-input-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.sb-date-picker-input {
	width: 100%;
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
	padding-right: 40px; /* Space for calendar icon */
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-sm);
	background-color: #fff;
	color: rgba(0, 0, 0, 0.87);
	cursor: pointer;
	transition: var(--sb-transition);
	pointer-events: auto;
	box-sizing: border-box;
	min-height: 40px;
	height: 40px;
}

/* Calendar icon inside input */
.sb-date-picker-input-icon {
	position: absolute;
	right: var(--sb-spacing-sm);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: rgba(0, 0, 0, 0.6);
	width: 20px;
	height: 20px;
}

.sb-date-picker-input-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sb-date-picker-input[readonly] {
	cursor: pointer;
	background-color: #fff;
}

.sb-date-picker-input:hover {
	border-color: rgba(0, 0, 0, 0.5);
}

.sb-date-picker-input:focus {
	outline: none;
	border-color: var(--sb-color-primary);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.sb-date-picker-input:disabled {
	background-color: rgba(0, 0, 0, 0.05);
	cursor: not-allowed;
	opacity: 0.6;
}

.sb-date-picker__trigger {
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
	font-size: 16px;
	line-height: 1;
	border: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-sm);
	background-color: #fff;
	color: rgba(0, 0, 0, 0.87);
	cursor: pointer;
	transition: var(--sb-transition);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
}

.sb-date-picker__trigger:hover {
	background-color: var(--sb-color-primary);
	color: #fff;
	border-color: var(--sb-color-primary);
}

.sb-date-picker__trigger:focus {
	outline: none;
	border-color: var(--sb-color-primary);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.sb-date-picker {
	position: absolute;
	z-index: 10000;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-md);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 14px 10px 10px 10px;
	min-width: 260px;
	width: auto;
	max-width: calc(100vw - 20px);
	max-height: calc(100vh - 20px);
	overflow-y: auto;
	overflow-x: visible;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-date-picker__content-wrapper {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: flex-start;
	flex-wrap: nowrap;
	overflow: visible;
}

.sb-date-picker__close {
	position: absolute;
	top: 0;
	right: 0px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #d63638;
	font-size: 18px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 50%;
	transition: var(--sb-transition);
	z-index: 10;
	padding: 0;
	line-height: 1;
}

.sb-date-picker__close:hover {
	background-color: rgba(214, 54, 56, 0.1);
	color: #b32d2e;
}

.sb-date-picker__date-section {
	margin-bottom: var(--sb-spacing-sm);
	flex: 1;
	min-width: 260px;
	position: relative;
}

.sb-date-picker__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sb-spacing-sm);
}

.sb-date-picker__nav {
	background: none;
	border: none;
	font-size: 20px;
	color: var(--sb-color-primary);
	cursor: pointer;
	padding: var(--sb-spacing-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--sb-border-radius-sm);
	transition: var(--sb-transition);
	min-width: 28px;
	height: 28px;
}

.sb-date-picker__nav:hover {
	background-color: rgba(34, 113, 177, 0.1);
}

.sb-date-picker__month-year {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	position: relative;
	z-index: 1;
}

.sb-date-picker__month-btn,
.sb-date-picker__year-btn {
	background: none;
	border: none;
	font-size: 13px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.87);
	cursor: pointer;
	padding: 3px 6px;
	border-radius: var(--sb-border-radius-sm);
	transition: var(--sb-transition);
}

.sb-date-picker__month-btn:hover,
.sb-date-picker__year-btn:hover {
	background-color: rgba(34, 113, 177, 0.1);
	color: var(--sb-color-primary);
}

.sb-date-picker__month-selector,
.sb-date-picker__year-selector {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-sm);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	padding: 8px;
	max-height: 100%;
	overflow-y: auto;
	z-index: 10001;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	align-content: start;
}

.sb-date-picker__year-selector {
	grid-template-columns: repeat(4, 1fr);
}

.sb-date-picker__month-option,
.sb-date-picker__year-option {
	padding: 8px 12px;
	cursor: pointer;
	border-radius: var(--sb-border-radius-sm);
	text-align: center;
	font-size: 13px;
	transition: var(--sb-transition);
}

.sb-date-picker__month-option:hover,
.sb-date-picker__year-option:hover {
	background-color: rgba(34, 113, 177, 0.1);
}

.sb-date-picker__month-option--selected,
.sb-date-picker__year-option--selected {
	background-color: var(--sb-color-primary);
	color: #fff;
}

.sb-date-picker__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
	margin-bottom: var(--sb-spacing-sm);
}

.sb-date-picker__weekday {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
	padding: 3px 2px;
}

.sb-date-picker__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.sb-date-picker__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	cursor: pointer;
	border-radius: var(--sb-border-radius-sm);
	transition: var(--sb-transition);
	color: rgba(0, 0, 0, 0.87);
	padding: 2px;
	min-height: 26px;
}

.sb-date-picker__day:hover {
	background-color: rgba(34, 113, 177, 0.1);
}

.sb-date-picker__day--today {
	font-weight: 600;
	color: var(--sb-color-primary);
}

.sb-date-picker__day--selected {
	background-color: var(--sb-color-primary);
	color: #fff;
	font-weight: 600;
}

.sb-date-picker__day--selected:hover {
	background-color: var(--sb-color-secondary);
}

.sb-date-picker__day--empty {
	cursor: default;
}

.sb-date-picker__day--empty:hover {
	background-color: transparent;
}

.sb-date-picker__time-section {
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: var(--sb-spacing-md);
	margin-left: var(--sb-spacing-md);
	position: relative;
	flex: 0 0 100px;
	min-width: 100px;
	max-width: 100px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: auto;
}

.sb-date-picker__time-header {
	margin-bottom: var(--sb-spacing-xs);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex-shrink: 0;
}

.sb-date-picker__current-time {
	font-size: 18px;
	font-weight: 600;
	color: var(--sb-color-primary);
	padding: 8px;
	background-color: rgba(34, 113, 177, 0.1);
	border-radius: var(--sb-border-radius-sm);
}

.sb-date-picker__time-input-hour,
.sb-date-picker__time-input-minute {
	width: 28px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sb-color-primary);
	padding: 0px 2px !important;
	text-align: center;
	background-color: transparent;
	border: none !important;
	border-radius: 0;
	box-sizing: border-box;
	transition: var(--sb-transition);
	outline: none;
	cursor: text;
}

.sb-date-picker__time-input-hour:focus,
.sb-date-picker__time-input-minute:focus {
	outline: none;
	background-color: rgba(34, 113, 177, 0.1);
	border-radius: var(--sb-border-radius-sm);
}

.sb-date-picker__time-header {
	cursor: default;
}

.sb-date-picker__time-separator-input {
	font-size: 14px;
	font-weight: 700;
	color: var(--sb-color-primary);
	padding: 0 1px;
}

.sb-date-picker__time-scroll,
.sb-date-picker__time-scroll-wrapper {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: var(--sb-border-radius-sm);
	padding: 3px;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Thin scrollbar for time scroll without inner border */
.sb-date-picker__time-scroll::-webkit-scrollbar {
	width: 6px;
}

.sb-date-picker__time-scroll::-webkit-scrollbar-track {
	background: transparent;
	border: none;
}

.sb-date-picker__time-scroll::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	border: none;
}

.sb-date-picker__time-scroll::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar */
.sb-date-picker__time-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.sb-date-picker__time-scroll-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.sb-date-picker__time-scroll-hours,
.sb-date-picker__time-scroll-minutes {
	flex: 1;
	max-height: 200px;
	overflow-y: auto;
}

.sb-date-picker__time-option {
	padding: 6px 10px;
	cursor: pointer;
	border-radius: var(--sb-border-radius-sm);
	text-align: center;
	width: 100%;
	max-width: 80px;
	margin: 0 auto;
	font-size: 12px;
	transition: var(--sb-transition);
	margin: 2px 0;
}

.sb-date-picker__time-option:hover {
	background-color: rgba(34, 113, 177, 0.1);
}

.sb-date-picker__time-option--selected {
	background-color: var(--sb-color-primary);
	color: #fff;
	font-weight: 600;
}

.sb-date-picker__time-option--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.sb-date-picker__day--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
	color: rgba(0, 0, 0, 0.3);
}

/* ============================================
   Responsive Date Picker (Smaller Screens)
   ============================================ */

/* Mobile toggle buttons - hidden by default */
.sb-date-picker__mobile-toggle {
	display: none;
	padding: 8px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	background-color: #f9f9f9;
	gap: 4px;
	justify-content: center;
	align-items: center;
}

.sb-date-picker__toggle-btn {
	flex: 0 0 auto;
	padding: 8px 20px;
	border: none;
	background-color: transparent;
	color: rgba(0, 0, 0, 0.4);
	border-radius: 0;
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	transition: all 0.2s ease;
	text-transform: none;
}

.sb-date-picker__toggle-btn:hover {
	color: rgba(0, 0, 0, 0.6);
}

.sb-date-picker__toggle-btn--active {
	color: var(--sb-color-primary);
	background-color: transparent;
	border: none;
}

.sb-date-picker__toggle-btn--active:hover {
	color: var(--sb-color-secondary);
}

/* Responsive styles for smaller screens */
@media (max-width: 600px), (max-width: 768px) and (max-height: 600px) {
	/* Show mobile toggle on small screens */
	.sb-date-picker__mobile-toggle {
		display: flex !important;
	}
	
	.sb-date-picker--mobile .sb-date-picker__content-wrapper {
		flex-direction: column;
	}
	
	.sb-date-picker--mobile .sb-date-picker__date-section {
		width: 100%;
		margin-bottom: 0;
	}
	
	.sb-date-picker--mobile .sb-date-picker__time-section {
		width: 100%;
		border-left: none;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		height: auto !important;
		min-height: 250px;
		margin: 0 auto;
		padding-left: 0px;
	}
	
	/* Reduce date box sizes on mobile */
	.sb-date-picker--mobile .sb-date-picker__days {
		gap: 1px;
	}
	
	.sb-date-picker--mobile .sb-date-picker__day {
		font-size: 11px;
		padding: 4px;
		min-height: 28px;
	}
	
	.sb-date-picker--mobile .sb-date-picker__weekday {
		font-size: 10px;
		padding: 4px;
	}
	
	.sb-date-picker--mobile .sb-date-picker__header {
		padding: 8px;
	}
	
	.sb-date-picker--mobile .sb-date-picker__month-year {
		font-size: 13px;
	}
	
	.sb-date-picker--mobile .sb-date-picker__nav {
		width: 28px;
		height: 28px;
		font-size: 18px;
	}
}

.sb-date-picker__time-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sb-spacing-md);
}

.sb-date-picker__time-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sb-spacing-xs);
}

.sb-date-picker__time-group label {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
	font-weight: 500;
}

.sb-date-picker__time-input-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sb-date-picker__time-input {
	width: 60px;
	padding: var(--sb-spacing-xs) var(--sb-spacing-sm);
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	border: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-sm);
	background-color: #fff;
	color: rgba(0, 0, 0, 0.87);
	-moz-appearance: textfield;
	appearance: textfield;
}

.sb-date-picker__time-input::-webkit-outer-spin-button,
.sb-date-picker__time-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sb-date-picker__time-input:focus {
	outline: none;
	border-color: var(--sb-color-primary);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.sb-date-picker__time-btn {
	background: none;
	border: none;
	font-size: 12px;
	color: var(--sb-color-primary);
	cursor: pointer;
	padding: 2px 8px;
	transition: var(--sb-transition);
	border-radius: var(--sb-border-radius-sm);
}

.sb-date-picker__time-btn:hover {
	background-color: rgba(34, 113, 177, 0.1);
}

.sb-date-picker__time-separator {
	font-size: 24px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.6);
	align-self: flex-end;
	margin-bottom: 20px;
}

.sb-date-picker__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--sb-spacing-sm);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: var(--sb-spacing-md);
	margin-top: var(--sb-spacing-md);
}

.sb-date-picker__btn {
	padding: var(--sb-spacing-sm) var(--sb-spacing-md);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid rgba(0, 0, 0, 0.23);
	border-radius: var(--sb-border-radius-sm);
	cursor: pointer;
	transition: var(--sb-transition);
}

.sb-date-picker__btn--cancel {
	background-color: #fff;
	color: rgba(0, 0, 0, 0.87);
}

.sb-date-picker__btn--cancel:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.sb-date-picker__btn--confirm {
	background-color: var(--sb-color-primary);
	color: #fff;
	border-color: var(--sb-color-primary);
}

.sb-date-picker__btn--confirm:hover {
	background-color: var(--sb-color-secondary);
	border-color: var(--sb-color-secondary);
}

.sb-date-picker__description {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
}

.sb-date-picker__error {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: var(--sb-color-error);
}

.sb-date-picker__success {
	margin-top: var(--sb-spacing-xs);
	font-size: 12px;
	color: var(--sb-color-success);
}

/* ==========================================================================
   Menu shortcode (minimal; can be designed later)
   ========================================================================== */

.sb-menu-page{display:block;}
.sb-menu-page__categories{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.sb-menu-page__category{display:inline-flex;align-items:center;max-width:220px;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:800;color:var(--sb-color-dark);background:var(--sb-color-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;transition:background 0.2s ease,color 0.2s ease;}
.sb-menu-page__category:hover{background:color-mix(in srgb, var(--sb-color-primary) 12%, #fff);color:var(--sb-color-primary);}
.sb-menu-page__category-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%;}
.sb-menu-page__category.is-active{background:color-mix(in srgb, var(--sb-color-primary) 12%, #fff);color:var(--sb-color-primary);box-shadow:0 10px 24px rgba(0,0,0,0.08);}
.sb-menu-page__category.is-active:hover{background:color-mix(in srgb, var(--sb-color-primary) 12%, #fff);color:var(--sb-color-primary);}

@media (min-width: 769px){
	.sb-menu-page__category{font-size:14px;padding:8px 12px;}
}

/* Ensure consistent nav colors even inside theme `.entry-content a` styles */
.sb-menu-page a.sb-menu-page__category{
	color: var(--sb-color-dark);
	text-decoration: none;
}
.sb-menu-page a.sb-menu-page__category:hover{
	color: var(--sb-color-primary);
	text-decoration: none;
}
.sb-menu-page a.sb-menu-page__category.is-active,
.sb-menu-page a.sb-menu-page__category.is-active:hover{
	color: var(--sb-color-primary);
	text-decoration: none;
}
.sb-menu-page__header{margin:6px 0 18px 0;}
.sb-menu-page__content{padding:4px 0 8px;}
.sb-menu-page__title{margin:0 0 6px 0;font-size:26px;line-height:1.15;font-weight:900;}
.sb-menu-page__subtitle{margin:0;color:rgba(0,0,0,0.65);max-width:70ch;font-size:15px;line-height:1.45;}
.sb-menu-page__section{margin-top:18px;}
.sb-menu-page__section-title{margin:0 0 10px 0;font-size:18px;}
.sb-menu-page__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.sb-menu-page__dishes{display:grid;grid-template-columns:1fr;gap:10px;}

.sb-menu-page{--sb-menu-fs-card:16px;--sb-menu-fs-dish:14px;--sb-menu-fs-meta:12px;}

/* When rendered inside theme content (e.g. /speisen page), ensure menu styles
   override generic `.entry-content` typography rules. */
.sb-menu-page .sb-menu-page__header{margin:6px 0 18px 0;}
.sb-menu-page .sb-menu-page__content{padding:4px 0 8px;}
.sb-menu-page .sb-menu-page__title{margin:0 0 6px 0;font-size:26px;line-height:1.15;font-weight:900;}
.sb-menu-page .sb-menu-page__subtitle{margin:0;color:rgba(0,0,0,0.65);max-width:70ch;font-size:15px;line-height:1.45;}
.sb-menu-page .sb-menu-page__section-title{margin:0 0 10px 0;font-size:18px;font-weight:900;line-height:1.25;}
.sb-menu-page .sb-menu-card__title{margin:0;font-weight:900;letter-spacing:-0.01em;line-height:1.2;font-size:var(--sb-menu-fs-card);}
.sb-menu-page .sb-menu-dish__title{margin:0;font-weight:900;font-size:var(--sb-menu-fs-dish);line-height:1.25;display:inline;}
.sb-menu-card{background:rgba(255,255,255,0.65);border-radius:16px;overflow:visible;box-shadow:0 10px 26px rgba(0,0,0,0.06);display:flex;flex-direction:column;}
.sb-menu-card--full{grid-column:1 / -1;}
.sb-menu-card--full .sb-menu-page__dishes{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.sb-menu-card--flat{background:transparent;box-shadow:none;border-radius:16px;border:1px solid rgba(0,0,0,0.10);padding:12px;}
.sb-menu-card--flat .sb-menu-card__header{padding:0 0 10px;}
.sb-menu-card--flat .sb-menu-card__body{padding:0;}
.sb-menu-card--flat .sb-menu-page__dishes{margin-top:10px;}
.sb-menu-card__header{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 10px;}
.sb-menu-card__thumb{width:54px;height:54px;border-radius:14px;background-size:cover;background-position:center;flex:0 0 auto;box-shadow:0 10px 20px rgba(0,0,0,0.10);}
.sb-menu-card__thumb--placeholder{background:linear-gradient(135deg, rgba(34,113,177,0.10), rgba(19,94,150,0.08)),repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 10px, rgba(0,0,0,0.02) 10px 20px);}
.sb-menu-card__thumb--logo{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.55);}
.sb-menu-card__thumb--logo img{width:80%;height:80%;object-fit:contain;opacity:0.22;filter:grayscale(1);}
.sb-menu-card__headtext{min-width:0;flex:1 1 auto;}
.sb-menu-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.sb-menu-card__titlewrap{min-width:0;flex:1 1 auto;}
.sb-menu-card__titleline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sb-menu-title-highlight{color:var(--sb-color-secondary);font-style:italic;font-size:var(--sb-menu-fs-meta);font-weight:500;line-height:1.15;opacity:0.95;}
.sb-menu-flag{display:inline-flex;align-items:center;justify-content:center;padding:2px 7px;border-radius:999px;font-weight:900;font-size:11px;line-height:1;text-transform:uppercase;letter-spacing:0.02em;}
.sb-menu-flag--new{color:#00a32a;background:rgba(0,163,42,0.10);border:1px solid rgba(0,163,42,0.22);}
.sb-menu-card__price{flex:0 0 auto;text-align:right;font-weight:900;color:var(--sb-color-primary);font-size:var(--sb-menu-fs-dish);line-height:1.25;white-space:nowrap;}
.sb-menu-card__price-old{margin-top:2px;font-weight:800;color:rgba(0,0,0,0.45);text-decoration:line-through;font-size:12px;white-space:nowrap;}
.sb-menu-card__meta{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.sb-menu-card__title{margin:0;font-weight:900;letter-spacing:-0.01em;line-height:1.2;font-size:var(--sb-menu-fs-card);min-width:0;overflow-wrap:anywhere;word-break:break-word;}
.sb-menu-card__highlight{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12px;color:var(--sb-color-secondary);background:rgba(19,94,150,0.10);background:color-mix(in srgb, var(--sb-color-secondary) 12%, #ffffff);padding:6px 10px;border-radius:999px;}
.sb-menu-card__excerpt{margin-top:6px;color:rgba(0,0,0,0.6);font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sb-menu-card__body{padding:0 14px 14px;}
.sb-menu-dish{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.65);box-shadow:0 10px 26px rgba(0,0,0,0.06);}
.sb-menu-dish__row{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;}
.sb-menu-dish__left{flex:1 1 auto;min-width:0;}
.sb-menu-dish__right{flex:0 0 auto;text-align:right;min-width:72px;}
.sb-menu-dish__titleline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.sb-menu-dish__number{font-weight:900;color:rgba(0,0,0,0.5);font-size:var(--sb-menu-fs-dish);line-height:1.25;}
.sb-menu-dish__title{margin:0;font-weight:900;font-size:14px;line-height:1.25;display:inline;}
.sb-menu-dish__title{font-size:var(--sb-menu-fs-dish);}
.sb-menu-dish__badges{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sb-menu-dish__price{font-weight:900;color:var(--sb-color-primary);font-size:var(--sb-menu-fs-dish);line-height:1.25;}
.sb-menu-dish__price-old{margin-top:2px;font-weight:800;color:rgba(0,0,0,0.45);text-decoration:line-through;font-size:12px;}
.sb-menu-dish__subtitle{margin-top:2px;color:rgba(0,0,0,0.65);font-size:13px;font-weight:700;}
.sb-menu-dish__desc{margin-top:8px;color:rgba(0,0,0,0.65);font-size:13px;line-height:1.6;}
.sb-menu-dish__prices{margin-top:6px;color:rgba(0,0,0,0.55);font-size:12px;}

.sb-menu-pill{display:inline-flex;align-items:center;gap:6px;border:none;background:rgba(255,255,255,0.7);padding:4px 8px;border-radius:999px;font-weight:800;font-size:var(--sb-menu-fs-meta);color:rgba(0,0,0,0.75);line-height:1.1;}
.sb-menu-pill--highlight{background:rgba(19,94,150,0.10);background:color-mix(in srgb, var(--sb-color-secondary) 12%, #ffffff);color:var(--sb-color-secondary);}
.sb-menu-badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,0.75);box-shadow:0 8px 18px rgba(0,0,0,0.06);padding:0 8px;gap:4px;}
.sb-menu-badge i{font-size:14px;line-height:1;}
.sb-menu-badge__img{width:16px;height:16px;object-fit:contain;display:block;}
.sb-menu-badge--diet i{color:#4caf50;}
.sb-menu-badge--diet--veg i{color:#4caf50;}
.sb-menu-badge--diet--vegan i{color:#4caf50;}
.sb-menu-badge--diet--halal i{color:#4caf50;}
.sb-menu-badge--diet--fisch i{color:#2196f3;}
.sb-menu-badge--diet--meat i{color:#f44336;}
.sb-menu-badge--diet--none i{color:#999;}
.sb-menu-badge--spice i{color:#ff0000;}

.sb-menu-chip{border:none;cursor:pointer;padding:4px 8px;border-radius:999px;font-weight:900;font-size:var(--sb-menu-fs-meta);background:rgba(255,255,255,0.80);color:var(--sb-color-primary);box-shadow:0 8px 18px rgba(0,0,0,0.06);line-height:1.1;position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
.sb-menu-chip:hover{text-decoration:none;}
.sb-menu-chip--all{color:var(--sb-color-primary);}
.sb-menu-chip--additive{color:var(--sb-color-secondary);}

.sb-menu-meta-modal__body ul{margin:0;padding-left:18px;}
.sb-menu-meta-modal__body li{margin:0 0 8px 0;line-height:1.5;}
.sb-menu-meta-modal__section{margin:0 0 14px 0;}
.sb-menu-meta-modal__section-title{font-weight:900;margin:0 0 8px 0;}

/* Menu details modal: smaller, more professional typography */
#sb-menu-meta-modal .sb-modal__title{font-size:18px;}
#sb-menu-meta-modal .sb-modal__header{padding:14px 16px;}
#sb-menu-meta-modal .sb-modal__body{padding:14px 16px;}
.sb-menu-meta-modal__body{font-size:13px;line-height:1.35;color:rgba(0,0,0,0.78);}
.sb-modal--target .sb-modal__header{padding:12px 14px;}
.sb-modal--target .sb-modal__title{font-size:16px;font-weight:800;}
.sb-modal--target .sb-modal__body{padding:12px 14px;}
.sb-menu-meta-modal__section-title{font-size:14px;font-weight:900;margin:0 0 8px 0;color:rgba(0,0,0,0.9);}
.sb-menu-meta-modal__body ul{margin:0;padding-left:0;list-style:none;}
.sb-menu-meta-modal__body li{margin:0 0 6px 0;line-height:1.35;display:flex;gap:6px;align-items:flex-start;}
.sb-menu-meta-modal__body span{line-height:1.35;}
.sb-menu-meta-modal__body li strong{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:24px;
	height:22px;
	padding:0 8px;
	border-radius:999px;
	background:rgba(255,255,255,0.85);
	color:var(--sb-color-primary);
	box-shadow:0 8px 18px rgba(0,0,0,0.06);
	font-weight:900;
	font-size:12px;
}

/* Legend (reusable) */
.sb-menu-legend{margin-top:32px;padding:14px;border-radius:16px;background:rgba(255,255,255,0.35);}
.sb-menu-legend__title{margin:0 0 10px 0;font-size:16px;line-height:1.2;}
.sb-menu-legend__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.sb-menu-legend__group-title{font-weight:900;font-size:13px;margin:0 0 10px 0;color:rgba(0,0,0,0.7);}
.sb-menu-legend__items{display:grid;grid-template-columns:1fr;gap:10px;}
.sb-menu-legend__item{display:flex;align-items:center;gap:10px;}
.sb-menu-legend__label{font-size:13px;color:rgba(0,0,0,0.75);}

@media (max-width: 768px){
	.sb-menu-legend__grid{grid-template-columns:1fr;}
}

/* Menu Reference (reusable) */
.sb-menu-reference{margin-top:32px;padding:14px;border-radius:16px;background:rgba(255,255,255,0.35);}
.sb-menu-reference__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.sb-menu-reference__group--wide{grid-column:1 / -1;}
.sb-menu-reference__group-title{font-weight:900;font-size:12px;margin:0 0 8px 0;color:rgba(0,0,0,0.7);}
.sb-menu-reference__icons{display:flex;flex-wrap:wrap;gap:10px;}
.sb-menu-reference__icon{display:inline-flex;align-items:center;gap:6px;}
.sb-menu-reference__icon img{width:16px;height:16px;object-fit:contain;display:block;opacity:0.9;}
.sb-menu-reference__peppers{display:inline-flex;align-items:center;gap:2px;}
.sb-menu-reference__fa{font-size:14px;line-height:1;}
.sb-menu-reference__fa--diet{color:#4caf50;}
.sb-menu-reference__fa--diet.fa-fish{color:#2196f3;}
.sb-menu-reference__fa--diet.fa-drumstick-bite{color:#f44336;}
.sb-menu-reference__fa--diet.fa-circle{color:#999;}
.sb-menu-reference__fa--spice{color:#ff0000;}
.sb-menu-reference__label{font-size:12px;line-height:1.2;color:rgba(0,0,0,0.75);}
.sb-menu-reference__meta p{margin:0;font-size:12px;line-height:1.45;color:rgba(0,0,0,0.75);}
.sb-menu-reference__meta p strong{font-weight:900;color:rgba(0,0,0,0.85);}

@media (max-width: 768px){
	.sb-menu-reference__grid{grid-template-columns:1fr;}
	.sb-menu-reference__label{font-size:11px;}
	.sb-menu-reference__meta p{font-size:11px;}
}

@media (max-width: 768px){
	.sb-menu-page{--sb-menu-fs-card:15px;--sb-menu-fs-dish:13px;--sb-menu-fs-meta:11px;}
	.sb-menu-page__categories{flex-wrap:nowrap;}
	.sb-menu-page__category{max-width:180px;padding:7px 11px;font-size:13px;}
	.sb-menu-page__title{font-size:24px;}
	.sb-menu-page__subtitle{font-size:14px;}
	.sb-menu-dish__right{min-width:64px;}
	.sb-menu-page__cards{grid-template-columns:1fr;}
	.sb-menu-card--full .sb-menu-page__dishes{grid-template-columns:1fr;}
	.sb-menu-card__header{padding:12px 12px 8px;}
	.sb-menu-card__body{padding:0 12px 12px;}
}

@media (min-width: 1024px){
	.sb-menu-page{--sb-menu-fs-card:17px;--sb-menu-fs-dish:15px;--sb-menu-fs-meta:12px;}
}

/* ==========================================================================
   Horizontal scroll component (reusable)
   ========================================================================== */

.sb-hscroll{position:relative;display:block;margin:0 0 18px 0;overflow:visible;}
.sb-hscroll__viewport{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;z-index:1;}
.sb-hscroll__viewport::-webkit-scrollbar{display:none;}
.sb-hscroll__content{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding:2px 0;}

.sb-hscroll__btn{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:40px;
	border-radius:999px;
	border:none; /* no visible outline */
	background:rgba(255,255,255,0.92);
	backdrop-filter:blur(10px);
	box-shadow:0 10px 26px rgba(0,0,0,0.10);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--sb-color-primary, #2271b1);
	z-index:3;
	padding:0;
	line-height:0;
}
.sb-hscroll__btn::before{
	content:"";
	display:block;
	width:11px;
	height:11px;
	border-right:3px solid currentColor;
	border-bottom:3px solid currentColor;
	box-sizing:border-box;
	/* Slight offset to visually center chevron */
	transform:translateX(-1px) rotate(135deg);
}
.sb-hscroll__btn--prev{left:6px;}
.sb-hscroll__btn--next{right:6px;}
.sb-hscroll__btn--next::before{transform:translateX(1px) rotate(-45deg);}

.sb-hscroll__btn.is-hidden{display:none;}

/* Desktop: show all items (no scroll, no arrows) */
@media (min-width: 769px){
	.sb-hscroll__viewport{overflow:visible;}
	.sb-hscroll__content{flex-wrap:wrap;}
	.sb-hscroll__btn{display:none !important;}
}

@media (max-width: 768px){
	/* Mobile: enable scroll + arrows only when needed */
	.sb-hscroll__content{flex-wrap:nowrap;}
	/* Only add side padding when scrolling is possible (prevents weird gaps) */
	/* Reduce side padding but keep first/last item visible beside nav buttons */
	.sb-hscroll--has-scroll .sb-hscroll__viewport{padding-left:28px;padding-right:28px;}
	.sb-hscroll__btn--prev{left:-4px;}
	.sb-hscroll__btn--next{right:-4px;}
	.sb-hscroll__btn{width:36px;height:36px;}
}

/* Reusable map component (frontend) */
.sb-map-container{
	width:100%;
	min-height:200px;
	border-radius:8px;
	overflow:hidden;
	background:#e8e8e8;
}

/* ==========================================================================
   SB Widgets (Opening Hours, Address & Contact – sidebar/footer)
   ========================================================================== */
.sb-widget-opening-hours__subtitle{margin:0 0 10px 0;font-size:0.95em;color:rgba(0,0,0,0.65);}
.sb-widget-opening-hours__grid{display:flex;flex-direction:column;gap:6px;}
.sb-widget-opening-hours__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;}
.sb-widget-opening-hours__day{font-weight:600;}
.sb-widget-opening-hours__right{display:flex;flex-direction:column;align-items:flex-end;}
.sb-widget-opening-hours__time{color:rgba(0,0,0,0.75);}
.sb-widget-opening-hours__closed{color:rgba(0,0,0,0.5);font-style:italic;}
.sb-widget-opening-hours__day-note{margin-top:4px;font-size:0.85em;color:rgba(0,0,0,0.65);line-height:1.4;}
.sb-widget-opening-hours__note{margin:12px 0 0 0;font-size:0.9em;color:rgba(0,0,0,0.7);line-height:1.5;}
.sb-widget-opening-hours__warnings{margin-top:12px;padding:10px;border-radius:8px;background:rgba(238,166,43,0.12);}
.sb-widget-opening-hours__warnings-title{display:block;margin-bottom:6px;font-weight:700;font-size:13px;}
.sb-widget-opening-hours__warnings-list{margin:0;padding-left:18px;}
.sb-widget-opening-hours__warnings-item{margin-bottom:4px;line-height:1.4;}

.sb-widget-address-contact__content{display:flex;flex-direction:column;gap:10px;}
.sb-widget-address-contact__address{line-height:1.5;white-space:pre-line;}
.sb-widget-address-contact__link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--sb-color-primary,#2271b1);}
.sb-widget-address-contact__link:hover{text-decoration:underline;}
.sb-widget-address-contact__icon{display:inline-flex;align-items:center;justify-content:center;}
.sb-widget-address-contact__icon svg{display:block;}

/* ============================================
   Reservation form (frontend shortcode)
   ============================================ */
.sb-reservation-form-wrap{margin:1em 0;}
.sb-reservation-form__title{margin:0 0 0.5em;font-size:1.5em;}
.sb-reservation-form__subtitle{margin:0 0 1em;font-size:1em;opacity:0.9;}
.sb-reservation-form__info{margin-bottom:1em;line-height:1.5;}
.sb-reservation-form__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--sb-spacing-md,16px);margin-bottom:var(--sb-spacing-md,16px);}
.sb-reservation-form__message{margin-bottom:var(--sb-spacing-md,16px);}
.sb-reservation-form__note{margin-bottom:var(--sb-spacing-md,16px);font-size:0.9em;opacity:0.9;}
.sb-reservation-form__actions{margin-top:var(--sb-spacing-md,16px);}
.sb-reservation-form__time-desc{display:block;margin-top:4px;font-size:0.9em;min-height:1.2em;}
select.sb-input--select{min-height:38px;padding:6px 10px;font-size:14px;border-radius:var(--sb-border-radius-sm,4px);border:1px solid rgba(0,0,0,0.2);width:100%;}

/* ==========================================================================
   Impressum shortcode [sb_impressum]
   ========================================================================== */
.sb-impressum{margin:0 0 1.5rem 0;}
.sb-impressum__list{display:flex;flex-direction:column;gap:0.75rem;margin:0;padding:0;list-style:none;}
.sb-impressum__list dt,.sb-impressum__list dd{margin:0;}
.sb-impressum__label{font-weight:700;font-size:0.8em;color:rgba(0,0,0,0.7);}
.sb-impressum__value{margin-top:0;font-size:0.8125rem;line-height:1.45;}
.sb-impressum-section .sb-impressum:last-child{margin-bottom:0;}
.sb-impressum__custom-html,.sb-datenschutz__custom-html{margin-top:1.5rem;}