/**
 * Wizard Sidebar — shared chrome + positioning
 *
 * Applies to every wizard step's sidebar (Basic / Products / Discounts /
 * Schedule / Review). The sidebar's CONTENT (intelligence panel) is styled
 * in sidebar-intelligence.css. This file only handles the outer card
 * chrome, sticky positioning, responsive breakpoints, and print behavior.
 *
 * @package    SmartCycleDiscounts
 * @subpackage SmartCycleDiscounts/resources/assets/css/wizard/sidebar.css
 * @since      1.0.0
 */

/* ==========================================================================
   Base chrome (all breakpoints)
   ========================================================================== */

.wsscd-step-sidebar {
	display: flex;
	flex-direction: column;
	background: var(--wsscd-color-white);
	border: var(--wsscd-border-width) solid var(--wsscd-color-border-light);
	border-radius: var(--wsscd-radius-lg);
	box-shadow: var(--wsscd-shadow-sm);
	overflow: hidden;
	z-index: var(--wsscd-z-sticky);
}

/* ==========================================================================
   Desktop + tablet (≥961px): sticky column in the flex row
   ========================================================================== */

/* Scoped via `.wsscd-wizard-content >` to outrank
   `.wsscd-wizard-content > * { position: relative }` in wizard-fullscreen.css
   which loads later and would otherwise win source order at equal specificity. */
@media (min-width: 961px) {
	.wsscd-wizard-content > .wsscd-step-sidebar {
		position: sticky;
		top: calc(var(--wsscd-sidebar-sticky-top) + var(--wsscd-wizard-progress-height, 0px) + var(--wsscd-sidebar-margin-top));
		align-self: flex-start;
		flex: 0 0 var(--wsscd-sidebar-width);
		width: var(--wsscd-sidebar-width);
		height: calc(100vh - var(--wsscd-sidebar-sticky-top) - var(--wsscd-wizard-progress-height, 0px) - var(--wsscd-sidebar-margin-top) - var(--wsscd-nav-height) - var(--wsscd-sidebar-margin-bottom));
		max-height: calc(100vh - var(--wsscd-sidebar-sticky-top) - var(--wsscd-wizard-progress-height, 0px) - var(--wsscd-sidebar-margin-top) - var(--wsscd-nav-height) - var(--wsscd-sidebar-margin-bottom));
	}

}

/* Tablet (961–1200px): narrower sidebar. */
@media (min-width: 961px) and (max-width: 1200px) {
	.wsscd-step-sidebar {
		flex: 0 0 var(--wsscd-sidebar-width-tablet);
		width: var(--wsscd-sidebar-width-tablet);
	}
}

/* Small tablet (783–960px): sidebar stacks below main in the flex column
   layout set by wizard-fullscreen.css. */
@media (max-width: 960px) and (min-width: 783px) {
	.wsscd-step-sidebar {
		position: static;
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		max-height: none;
	}
}

/* ==========================================================================
   Custom scrollbar (desktop overflow)
   ========================================================================== */

.wsscd-step-sidebar::-webkit-scrollbar {
	width: var(--wsscd-spacing-sm);
}
.wsscd-step-sidebar::-webkit-scrollbar-track {
	background: var(--wsscd-color-surface);
}
.wsscd-step-sidebar::-webkit-scrollbar-thumb {
	background: var(--wsscd-color-border);
	border-radius: var(--wsscd-radius-sm);
}
.wsscd-step-sidebar::-webkit-scrollbar-thumb:hover {
	background: var(--wsscd-color-border-dark);
}

/* ==========================================================================
   Mobile (≤782px): drawer behavior
   ========================================================================== */

@media (max-width: 782px) {
	.wsscd-step-sidebar {
		position: fixed;
		top: calc(var(--wsscd-wp-admin-bar-height-mobile) + var(--wsscd-sidebar-margin-top));
		right: 0;
		height: calc(100vh - var(--wsscd-wp-admin-bar-height-mobile) - var(--wsscd-sidebar-margin-top) - var(--wsscd-nav-height-mobile) - var(--wsscd-sidebar-margin-bottom));
		max-height: calc(100vh - var(--wsscd-wp-admin-bar-height-mobile) - var(--wsscd-sidebar-margin-top) - var(--wsscd-nav-height-mobile) - var(--wsscd-sidebar-margin-bottom));
		width: 100%;
		max-width: 380px;
		box-shadow: var(--wsscd-shadow-lg);
		z-index: var(--wsscd-z-dropdown);
		transition: transform var(--wsscd-transition-normal);
	}

	.wsscd-step-sidebar.wsscd-sidebar-collapsed {
		transform: translateX(calc(100% - 40px));
	}
}

@media (max-width: 600px) {
	.wsscd-step-sidebar {
		max-width: 100%;
	}
}

/* ==========================================================================
   Print + reduced motion
   ========================================================================== */

@media print {
	.wsscd-step-sidebar {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wsscd-step-sidebar {
		animation: none;
		transition: none;
	}
}