/**
 * WC Multi Branch - Modal Styles
 *
 * @package WC_Multi_Branch
 */

/* ========================================
   Modal Overlay
   ======================================== */

.wc-mb-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, var(--wc-mb-overlay-opacity, 0.7));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--wc-mb-transition-speed, 0.2s) ease,
	            visibility var(--wc-mb-transition-speed, 0.2s) ease;
	padding: 20px;
	box-sizing: border-box;
}

.wc-mb-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.wc-mb-modal-overlay.is-forced .wc-mb-modal__close {
	display: none;
}

/* ========================================
   Modal Container
   ======================================== */

.wc-mb-modal {
	background: #fff;
	border-radius: var(--wc-mb-modal-radius, 8px);
	padding: var(--wc-mb-modal-padding, 24px);
	max-width: var(--wc-mb-modal-max-width, 480px);
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	position: relative;
	transform: translateY(-20px) scale(0.95);
	transition: transform var(--wc-mb-transition-speed, 0.2s) ease;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.wc-mb-modal-overlay.is-open .wc-mb-modal {
	transform: translateY(0) scale(1);
}

/* ========================================
   Close Button
   ======================================== */

.wc-mb-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	color: #666;
	border-radius: 4px;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1;
}

.wc-mb-modal__close:hover {
	background: #f0f0f0;
	color: #333;
}

.wc-mb-modal__close:focus {
	outline: 2px solid var(--wc-mb-primary-color, #0073aa);
	outline-offset: 2px;
}

.wc-mb-modal__close svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ========================================
   Modal Header
   ======================================== */

.wc-mb-modal__header {
	margin-bottom: 16px;
	padding-right: 40px; /* Space for close button */
}

.wc-mb-modal__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.3;
}

/* ========================================
   Modal Body
   ======================================== */

.wc-mb-modal__body {
	margin-bottom: 24px;
}

.wc-mb-modal__message {
	margin: 0 0 20px;
	color: #555;
	font-size: var(--wc-mb-font-size, 16px);
	line-height: 1.5;
}

.wc-mb-modal__info {
	background: #f8f9fa;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 20px;
}

.wc-mb-modal__current-branch {
	margin: 0;
	color: #333;
	font-size: 0.9375rem;
}

.wc-mb-modal__current-branch strong {
	color: var(--wc-mb-primary-color, #0073aa);
}

/* ========================================
   Branch Selector
   ======================================== */

.wc-mb-modal__selector {
	margin-bottom: 16px;
}

.wc-mb-select {
	width: 100%;
	padding: 12px 40px 12px 16px;
	font-size: var(--wc-mb-font-size, 16px);
	border: 2px solid #ddd;
	border-radius: calc(var(--wc-mb-modal-radius, 8px) / 2);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 16px center;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wc-mb-select:hover {
	border-color: #bbb;
}

.wc-mb-select:focus {
	outline: none;
	border-color: var(--wc-mb-primary-color, #0073aa);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

.wc-mb-select:disabled {
	background-color: #f5f5f5;
	cursor: not-allowed;
	opacity: 0.7;
}

/* ========================================
   Countdown
   ======================================== */

.wc-mb-modal__countdown {
	text-align: center;
	margin-top: 20px;
}

.wc-mb-modal__countdown-text {
	margin: 0 0 12px;
	color: #666;
	font-size: 0.9375rem;
}

.wc-mb-modal__countdown-bar {
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
}

.wc-mb-modal__countdown-progress {
	height: 100%;
	background: var(--wc-mb-primary-color, #0073aa);
	width: 0;
	transition: width 1s linear;
}

/* ========================================
   Modal Footer
   ======================================== */

.wc-mb-modal__footer {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wc-mb-modal__actions {
	display: flex;
	gap: 12px;
}

.wc-mb-modal__actions[hidden] {
	display: none;
}

/* ========================================
   Buttons
   ======================================== */

.wc-mb-btn {
	flex: 1;
	padding: 14px 24px;
	font-size: var(--wc-mb-font-size, 16px);
	font-weight: 500;
	border-radius: calc(var(--wc-mb-modal-radius, 8px) / 2);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
	border: none;
	text-align: center;
	line-height: 1.2;
}

.wc-mb-btn:focus {
	outline: 2px solid var(--wc-mb-primary-color, #0073aa);
	outline-offset: 2px;
}

.wc-mb-btn:active {
	transform: translateY(1px);
}

.wc-mb-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.wc-mb-btn--primary {
	background: var(--wc-mb-primary-color, #0073aa);
	color: #fff;
}

.wc-mb-btn--primary:hover:not(:disabled) {
	background: var(--wc-mb-primary-hover, #005a87);
}

.wc-mb-btn--secondary {
	background: #f0f0f0;
	color: #333;
}

.wc-mb-btn--secondary:hover:not(:disabled) {
	background: #e0e0e0;
}

.wc-mb-btn--outline {
	background: transparent;
	color: var(--wc-mb-primary-color, #0073aa);
	border: 2px solid var(--wc-mb-primary-color, #0073aa);
}

.wc-mb-btn--outline:hover:not(:disabled) {
	background: var(--wc-mb-primary-color, #0073aa);
	color: #fff;
}

/* ========================================
   Loading State
   ======================================== */

.wc-mb-modal__loading {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-radius: var(--wc-mb-modal-radius, 8px);
	z-index: 10;
}

.wc-mb-modal__loading[hidden] {
	display: none;
}

.wc-mb-modal__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e0e0e0;
	border-top-color: var(--wc-mb-primary-color, #0073aa);
	border-radius: 50%;
	animation: wc-mb-spin 0.8s linear infinite;
}

@keyframes wc-mb-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 480px) {
	.wc-mb-modal-overlay {
		padding: 0;
		align-items: flex-end;
	}

	.wc-mb-modal {
		max-width: 100%;
		max-height: 85vh;
		border-radius: var(--wc-mb-modal-radius, 8px) var(--wc-mb-modal-radius, 8px) 0 0;
		transform: translateY(100%);
	}

	.wc-mb-modal-overlay.is-open .wc-mb-modal {
		transform: translateY(0);
	}

	.wc-mb-modal__actions {
		flex-direction: column;
	}

	.wc-mb-btn {
		width: 100%;
	}

}

/* ========================================
   RTL Support
   ======================================== */

[dir="rtl"] .wc-mb-modal__close {
	right: auto;
	left: 16px;
}

[dir="rtl"] .wc-mb-modal__header {
	padding-right: 0;
	padding-left: 40px;
}

[dir="rtl"] .wc-mb-select {
	padding: 12px 16px 12px 40px;
	background-position: left 16px center;
}


/* ========================================
   Accessibility: Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	.wc-mb-modal-overlay,
	.wc-mb-modal,
	.wc-mb-btn,
	.wc-mb-select,
	.wc-mb-modal__countdown-progress {
		transition: none;
	}

	.wc-mb-modal__spinner {
		animation: none;
	}
}

/* ========================================
   Shortcode: Current Area Display
   ======================================== */

.wc-mb-current-area {
	display: inline-block;
	font-weight: 600;
	color: var(--wc-mb-primary-color, #0073aa);
}

.wc-mb-current-area--none {
	color: #666;
	font-weight: normal;
	font-style: italic;
}

/* ========================================
   Floating Area Indicator
   ======================================== */

.wc-mb-area-indicator {
	position: fixed;
	z-index: 99999;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.wc-mb-area-indicator--bottom-right {
	bottom: 20px;
	right: 20px;
}

.wc-mb-area-indicator--bottom-left {
	bottom: 20px;
	left: 20px;
}

.wc-mb-area-indicator--top-right {
	top: 20px;
	right: 20px;
}

.wc-mb-area-indicator--top-left {
	top: 20px;
	left: 20px;
}

.wc-mb-area-indicator__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background: var(--wc-mb-primary-color, #0073aa);
	border: none;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
	max-width: 280px;
}

.wc-mb-area-indicator__btn:hover {
	background: var(--wc-mb-primary-hover, #005a87);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}

.wc-mb-area-indicator__btn:focus {
	outline: 2px solid var(--wc-mb-primary-color, #0073aa);
	outline-offset: 2px;
}

.wc-mb-area-indicator__btn:active {
	transform: translateY(0);
}

.wc-mb-area-indicator__icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
}

.wc-mb-area-indicator__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.wc-mb-area-indicator--none .wc-mb-area-indicator__btn {
	background: #666;
	animation: wc-mb-indicator-pulse 2s ease-in-out infinite;
}

.wc-mb-area-indicator--none .wc-mb-area-indicator__btn:hover {
	background: #555;
}

@keyframes wc-mb-indicator-pulse {
	0%, 100% {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}
	50% {
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
	}
}

/* Responsive indicator */
@media (max-width: 480px) {
	.wc-mb-area-indicator__btn {
		padding: 8px 14px;
		font-size: 13px;
		max-width: 220px;
	}

	.wc-mb-area-indicator__icon {
		width: 16px;
		height: 16px;
	}
}

/* ========================================
   Confirmation Dialog
   ======================================== */

.wc-mb-confirm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000000;
	padding: 20px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wc-mb-confirm-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.wc-mb-confirm-dialog {
	background: #fff;
	border-radius: var(--wc-mb-modal-radius, 8px);
	padding: 28px 24px 24px;
	max-width: 380px;
	width: 100%;
	text-align: center;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
	transform: translateY(-10px) scale(0.97);
	transition: transform 0.2s ease;
}

.wc-mb-confirm-overlay.is-open .wc-mb-confirm-dialog {
	transform: translateY(0) scale(1);
}

.wc-mb-confirm-dialog__icon {
	color: #e67e22;
	margin-bottom: 12px;
}

.wc-mb-confirm-dialog__icon svg {
	display: inline-block;
}

.wc-mb-confirm-dialog__message {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.5;
	color: #444;
}

.wc-mb-confirm-dialog__actions {
	display: flex;
	gap: 10px;
}

.wc-mb-confirm-dialog__actions .wc-mb-btn {
	flex: 1;
	padding: 12px 16px;
	font-size: 15px;
}

@media (max-width: 480px) {
	.wc-mb-confirm-dialog__actions {
		flex-direction: column;
	}
}

/* ========================================
   Inline Area Selector
   ======================================== */

.wc-mb-area-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

/* Safety: Hide duplicate searchable dropdowns within the same selector.
   Skip when date picker is present (legitimately has 2 dropdowns). */
.wc-mb-area-selector:not([data-show-date-picker="yes"]) .wc-mb-searchable-dropdown ~ .wc-mb-searchable-dropdown {
	display: none !important;
}

/* Safety: Hide duplicate area selector containers within Elementor popups.
   This can happen when Elementor pre-renders AND dynamically loads popup content. */
.elementor-popup-modal [data-wc-mb-area-selector] ~ [data-wc-mb-area-selector],
.dialog-lightbox-widget [data-wc-mb-area-selector] ~ [data-wc-mb-area-selector],
.dialog-widget [data-wc-mb-area-selector] ~ [data-wc-mb-area-selector] {
	display: none !important;
}

/* Also hide duplicate widget containers that contain area selectors */
.elementor-popup-modal .elementor-widget-container:has([data-wc-mb-area-selector]) ~ .elementor-widget-container:has([data-wc-mb-area-selector]),
.dialog-lightbox-widget .elementor-widget-container:has([data-wc-mb-area-selector]) ~ .elementor-widget-container:has([data-wc-mb-area-selector]),
.dialog-widget .elementor-widget-container:has([data-wc-mb-area-selector]) ~ .elementor-widget-container:has([data-wc-mb-area-selector]) {
	display: none !important;
}

/* Hide duplicate Elementor widget wrappers (the column/section level) */
.elementor-popup-modal .elementor-element:has([data-wc-mb-area-selector]) ~ .elementor-element:has([data-wc-mb-area-selector]) {
	display: none !important;
}

.wc-mb-area-selector__select {
	flex: 1 1 200px;
	min-width: 180px;
	padding: 10px 36px 10px 14px;
	font-size: 15px;
	border: 2px solid #ddd;
	border-radius: calc(var(--wc-mb-modal-radius, 8px) / 2);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wc-mb-area-selector__select:hover {
	border-color: #bbb;
}

.wc-mb-area-selector__select:focus {
	outline: none;
	border-color: var(--wc-mb-primary-color, #0073aa);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

.wc-mb-area-selector__confirm,
.wc-mb-area-selector__reset {
	flex: 0 0 auto;
	padding: 10px 20px;
	font-size: 15px;
	white-space: nowrap;
}

.wc-mb-area-selector--loading {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
}

.wc-mb-area-selector--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: var(--wc-mb-primary-color, #0073aa);
	border-radius: 50%;
	animation: wc-mb-spin 0.6s linear infinite;
	z-index: 10;
}

/* RTL support for area selector */
[dir="rtl"] .wc-mb-area-selector__select {
	padding: 10px 14px 10px 36px;
	background-position: left 14px center;
}

/* Responsive area selector */
@media (max-width: 480px) {
	.wc-mb-area-selector {
		flex-direction: column;
	}

	.wc-mb-area-selector__select {
		flex: 1 1 auto;
	}

	.wc-mb-area-selector__confirm,
	.wc-mb-area-selector__reset {
		width: 100%;
		text-align: center;
	}
}

/* ========================================
   Shortcode: Page Modal Content
   ======================================== */

.wc-mb-modal--page .wc-mb-modal__page-content {
	padding-top: 16px;
}

.wc-mb-modal--page .wc-mb-modal__page-content > *:first-child {
	margin-top: 0;
}

.wc-mb-modal--page .wc-mb-modal__page-content > *:last-child {
	margin-bottom: 0;
}

/* ========================================
   Custom Elementor Popup Overlay Fallback
   ======================================== */

.wc-mb-elementor-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, var(--wc-mb-overlay-opacity, 0.7));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	padding: 20px;
	box-sizing: border-box;
}

.wc-mb-elementor-overlay .elementor-popup-modal-wc-mb {
	background: #fff;
	border-radius: var(--wc-mb-modal-radius, 8px);
	max-width: 90vw;
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ========================================
   Unavailable Product Styles
   ======================================== */

/* Unavailable button on archive pages */
.wc-mb-unavailable-btn {
	display: inline-block;
	padding: 0.6em 1.2em;
	font-size: 0.85em;
	font-weight: 500;
	color: #999;
	background: #f5f5f5;
	border: 1px dashed #ddd;
	border-radius: var(--wc-mb-modal-radius, 4px);
	cursor: not-allowed;
	text-align: center;
	opacity: 0.8;
}

.wc-mb-unavailable-btn:hover {
	background: #f0f0f0;
	color: #888;
}

/* Product card with unavailable class */
.wc-mb-product-unavailable {
	opacity: 0.7;
	position: relative;
}

.wc-mb-product-unavailable::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.3);
	pointer-events: none;
	z-index: 1;
}

.wc-mb-product-unavailable .wc-mb-unavailable-btn {
	position: relative;
	z-index: 2;
}

/* Unavailable notice on single product page */
.wc-mb-unavailable-notice {
	background: #fff8e6;
	border: 1px solid #ffe58f;
	border-radius: var(--wc-mb-modal-radius, 8px);
	padding: 20px;
	margin: 20px 0;
}

.wc-mb-unavailable-notice__message {
	font-size: 1em;
	color: #ad6800;
	margin: 0 0 10px;
}

.wc-mb-unavailable-notice__available {
	font-size: 0.9em;
	color: #666;
	margin: 0 0 15px;
}

.wc-mb-unavailable-notice__action {
	margin: 0;
}

.wc-mb-unavailable-notice__action .button {
	background: var(--wc-mb-primary-color, #0073aa);
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: var(--wc-mb-modal-radius, 4px);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wc-mb-unavailable-notice__action .button:hover {
	background: var(--wc-mb-primary-color-dark, #005d8c);
	color: #fff;
}

/* RTL support for unavailable notice */
[dir="rtl"] .wc-mb-unavailable-notice {
	text-align: right;
}

/* ========================================
   Searchable Dropdown
   ======================================== */

.wc-mb-searchable-dropdown {
	position: relative;
	width: 100%;
}

.wc-mb-searchable-dropdown__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 12px 16px;
	font-size: var(--wc-mb-font-size, 16px);
	font-family: inherit;
	border: 2px solid #ddd;
	border-radius: calc(var(--wc-mb-modal-radius, 8px) / 2);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	text-align: start;
	line-height: 1.4;
	color: #333;
}

.wc-mb-searchable-dropdown__trigger:hover {
	border-color: #bbb;
}

.wc-mb-searchable-dropdown__trigger:focus {
	outline: none;
	border-color: var(--wc-mb-primary-color, #0073aa);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

.wc-mb-searchable-dropdown__value {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wc-mb-searchable-dropdown__value--placeholder {
	color: #999;
}

.wc-mb-searchable-dropdown__arrow {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-inline-start: 10px;
	color: #666;
	transition: transform 0.2s ease;
}

.wc-mb-searchable-dropdown__arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wc-mb-searchable-dropdown.is-open .wc-mb-searchable-dropdown__arrow {
	transform: rotate(180deg);
}

.wc-mb-searchable-dropdown__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background: #fff;
	border: 2px solid var(--wc-mb-primary-color, #0073aa);
	border-radius: calc(var(--wc-mb-modal-radius, 8px) / 2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 100;
	display: none;
	overflow: hidden;
}

.wc-mb-searchable-dropdown.is-open .wc-mb-searchable-dropdown__panel {
	display: block;
}

.wc-mb-searchable-dropdown__search-wrap {
	padding: 8px;
	border-bottom: 1px solid #eee;
}

.wc-mb-searchable-dropdown__search {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
	outline: none;
}

.wc-mb-searchable-dropdown__search:focus {
	border-color: var(--wc-mb-primary-color, #0073aa);
}

.wc-mb-searchable-dropdown__options {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	max-height: 220px;
	overflow-y: auto;
}

.wc-mb-searchable-dropdown__option {
	padding: 10px 14px;
	cursor: pointer;
	transition: background 0.1s ease;
	font-size: 14px;
	line-height: 1.4;
}

.wc-mb-searchable-dropdown__option:hover,
.wc-mb-searchable-dropdown__option.is-highlighted {
	background: #f0f6ff;
}

.wc-mb-searchable-dropdown__option.is-selected {
	background: var(--wc-mb-primary-color, #0073aa);
	color: #fff;
}

.wc-mb-searchable-dropdown__option.is-selected:hover {
	background: var(--wc-mb-primary-hover, #005a87);
}

.wc-mb-searchable-dropdown__no-results {
	padding: 14px;
	color: #999;
	font-size: 14px;
	text-align: center;
	list-style: none;
}

/* Searchable dropdown inside area selector */
.wc-mb-area-selector .wc-mb-searchable-dropdown {
	flex: 1 1 200px;
	min-width: 180px;
}

/* RTL support for searchable dropdown */
[dir="rtl"] .wc-mb-searchable-dropdown__trigger {
	text-align: right;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wc-mb-searchable-dropdown__arrow {
		transition: none;
	}
}

/* ========================================
   Date Picker
   ======================================== */

/* Date picker select - same styling as area select */
.wc-mb-date-picker__select {
	flex: 1 1 200px;
	min-width: 180px;
	padding: 10px 36px 10px 14px;
	font-size: 15px;
	font-family: inherit;
	border: 2px solid #ddd;
	border-radius: calc(var(--wc-mb-modal-radius, 8px) / 2);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 14px center;
	background-size: 12px;
	cursor: pointer;
	color: #333;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	transition: border-color var(--wc-mb-transition-speed, 0.2s) ease;
	box-sizing: border-box;
}

.wc-mb-date-picker__select:hover {
	border-color: #bbb;
}

.wc-mb-date-picker__select:focus {
	outline: none;
	border-color: var(--wc-mb-primary-color, #0073aa);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

[dir="rtl"] .wc-mb-date-picker__select {
	padding: 10px 14px 10px 36px;
	background-position: left 14px center;
}

/* Layout: area selector with date picker - two-column layout */
.wc-mb-area-selector[data-show-date-picker="yes"] {
	flex-wrap: wrap;
	gap: 16px;
	direction: rtl;
}

.wc-mb-area-selector[data-show-date-picker="yes"] .wc-mb-area-selector__column {
	flex: 1 1 45%;
	min-width: 160px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Prevent SearchableDropdown from stretching vertically inside columns */
.wc-mb-area-selector[data-show-date-picker="yes"] .wc-mb-area-selector__column .wc-mb-searchable-dropdown {
	flex: none;
}

.wc-mb-area-selector[data-show-date-picker="yes"] .wc-mb-area-selector__label {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	text-align: right;
}

.wc-mb-area-selector[data-show-date-picker="yes"] .wc-mb-area-selector__actions {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	gap: 10px;
}

/* Date picker calendar panel */
.wc-mb-date-calendar {
	position: relative;
	margin-top: 8px;
	background: #fff;
	border: 2px solid var(--wc-mb-primary-color, #0073aa);
	border-radius: calc(var(--wc-mb-modal-radius, 8px) / 2);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	z-index: 101;
	padding: 12px;
	box-sizing: border-box;
	direction: rtl;
}

.wc-mb-date-calendar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 600;
	color: #333;
}

.wc-mb-date-calendar__nav {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 8px;
	font-size: 14px;
	font-family: inherit;
	color: var(--wc-mb-primary-color, #0073aa);
	border-radius: 4px;
	transition: background 0.15s ease;
}

.wc-mb-date-calendar__nav:hover {
	background: #f0f6ff;
}

.wc-mb-date-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}

.wc-mb-date-calendar__day-header {
	font-size: 12px;
	font-weight: 600;
	color: #999;
	padding: 4px 0;
}

.wc-mb-date-calendar__day-header--saturday {
	color: #ccc;
}

.wc-mb-date-calendar__day {
	padding: 6px 2px;
	font-size: 14px;
	font-family: inherit;
	background: none;
	border: none;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	margin: 0 auto;
	color: #333;
}

.wc-mb-date-calendar__day:hover:not(.wc-mb-date-calendar__day--disabled):not(.wc-mb-date-calendar__day--empty) {
	background: #f0f6ff;
}

.wc-mb-date-calendar__day--selected {
	background: var(--wc-mb-primary-color, #0073aa) !important;
	color: #fff !important;
}

.wc-mb-date-calendar__day--today:not(.wc-mb-date-calendar__day--selected) {
	background: #f0f0f0;
	font-weight: 600;
}

.wc-mb-date-calendar__day--disabled {
	color: #ddd;
	cursor: not-allowed;
	pointer-events: none;
}

.wc-mb-date-calendar__day--empty {
	cursor: default;
	pointer-events: none;
}

.wc-mb-date-calendar__day--saturday {
	color: #ccc;
}

/* Responsive */
@media (max-width: 480px) {
	.wc-mb-area-selector[data-show-date-picker="yes"] {
		flex-direction: column;
	}

	.wc-mb-area-selector[data-show-date-picker="yes"] .wc-mb-area-selector__column {
		flex: 1 1 100%;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wc-mb-date-calendar__day,
	.wc-mb-date-calendar__nav {
		transition: none;
	}
}

/* ========================================
   Area Bar
   ======================================== */

.wc-mb-area-bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	background: var(--wc-mb-primary-color, #0073aa);
	color: #fff;
	border-radius: var(--wc-mb-modal-radius, 8px);
	cursor: pointer;
	transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
	text-decoration: none;
	border: none;
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	text-align: start;
}

.wc-mb-area-bar:hover {
	background: var(--wc-mb-primary-hover, #005a87);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.wc-mb-area-bar:focus {
	outline: 2px solid var(--wc-mb-primary-color, #0073aa);
	outline-offset: 2px;
}

.wc-mb-area-bar:active {
	transform: translateY(1px);
}

.wc-mb-area-bar__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-mb-area-bar__icon svg {
	width: 24px;
	height: 24px;
}

.wc-mb-area-bar__content {
	flex: 1;
	min-width: 0;
}

.wc-mb-area-bar__text {
	display: block;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.3;
}

.wc-mb-area-bar__subtitle {
	display: block;
	font-size: 13px;
	opacity: 0.8;
	line-height: 1.3;
	margin-top: 3px;
}

.wc-mb-area-bar__arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	opacity: 0.7;
}

.wc-mb-area-bar__arrow svg {
	width: 16px;
	height: 16px;
}

/* Responsive area bar */
@media (max-width: 480px) {
	.wc-mb-area-bar {
		padding: 14px 16px;
		gap: 10px;
	}

	.wc-mb-area-bar__icon svg {
		width: 20px;
		height: 20px;
	}

	.wc-mb-area-bar__text {
		font-size: 14px;
	}

	.wc-mb-area-bar__subtitle {
		font-size: 12px;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wc-mb-area-bar {
		transition: none;
	}
}

/* ========================================
   Home Area Selector
   ======================================== */

.wc-mb-home-selector {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	direction: rtl;
}

.wc-mb-home-selector__column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wc-mb-home-selector__label {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	line-height: 1.3;
	text-align: center;
}

.wc-mb-home-selector__select {
	width: 100%;
	padding: 10px 14px;
	font-size: 15px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fff;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
	text-align: right;
}

.wc-mb-home-selector__select:hover {
	border-color: #bbb;
}

.wc-mb-home-selector__select:focus {
	outline: none;
	border-color: var(--wc-mb-primary-color, #0073aa);
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

.wc-mb-home-selector__select:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background-color: #f9f9f9;
}

/* Loading state */
.wc-mb-home-selector--loading {
	position: relative;
	opacity: 0.6;
	pointer-events: none;
}

.wc-mb-home-selector--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: var(--wc-mb-primary-color, #0073aa);
	border-radius: 50%;
	animation: wc-mb-spin 0.6s linear infinite;
	z-index: 10;
}

@keyframes wc-mb-spin {
	to { transform: rotate(360deg); }
}

/* Disabled SearchableDropdown wrapper */
.wc-mb-searchable-dropdown--disabled {
	opacity: 0.5;
	pointer-events: none;
}

.wc-mb-searchable-dropdown--disabled .wc-mb-searchable-dropdown__trigger {
	cursor: not-allowed;
	background-color: #f9f9f9;
}

/* SearchableDropdown within home selector inherits column width */
.wc-mb-home-selector .wc-mb-searchable-dropdown {
	width: 100%;
	min-width: 0;
}

/* Calendar positioning within home selector */
.wc-mb-home-selector .wc-mb-date-calendar {
	right: 0;
	left: auto;
}

/* Responsive: stack vertically on mobile */
@media (max-width: 480px) {
	.wc-mb-home-selector {
		flex-direction: column;
	}

	.wc-mb-home-selector__column {
		width: 100%;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wc-mb-home-selector__select {
		transition: none;
	}
}