/**
 * RAWASYSTEM Express Checkout - Checkout Slider
 *
 * Multi-step slider styles including the sliding viewport, step panels,
 * directional transitions, dynamic height, and navigation actions.
 *
 * The slider uses a flexbox track with translateX transforms for smooth
 * horizontal sliding between steps. Height transitions are handled via
 * JavaScript measuring the active step and applying an inline height.
 *
 * @package RAWASYSTEM_Express_Checkout
 * @version 1.0.0
 */

/* ==========================================================================
   1. Slider Container
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-slider-container {
	overflow: hidden;
	position: relative;
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Slider Track
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-slider-track {
	display: flex;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* RTL: Reverse the flex direction so translateX works correctly */
.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-slider-track {
	flex-direction: row-reverse;
}

/* ==========================================================================
   3. Individual Step Panel
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-slider-step {
	min-width: 100%;
	flex-shrink: 0;
	padding: var(--rawasystem-space-6);
	box-sizing: border-box;
	opacity: 1;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Inactive steps are dimmed and unclickable ----------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-step--inactive {
	opacity: 0.3;
	pointer-events: none;
}

/* -- Active step is fully visible ------------------------------------ */
.rawasystem-checkout-wrapper .rawasystem-slider-step--active {
	opacity: 1;
	pointer-events: auto;
}

/* -- Entering animation for the active step -------------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-step--enter {
	animation: rawasystem-fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ==========================================================================
   4. Step Content Variants
   ========================================================================== */

/* -- Step 1: Customer Info ------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-step--customer .rawasystem-input-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rawasystem-space-3);
}

/* -- Step 2: Address & Shipping -------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-step--address .rawasystem-input-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rawasystem-space-3);
}

.rawasystem-checkout-wrapper .rawasystem-slider-step--address .rawasystem-input-row--3 {
	grid-template-columns: 1fr 1fr 1fr;
}

/* -- Step 3: Quantity & Options -------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-step--options .rawasystem-product-options {
	margin-bottom: var(--rawasystem-space-5);
}

.rawasystem-checkout-wrapper .rawasystem-slider-step--options .rawasystem-product-image {
	width: 64px;
	height: 64px;
	border-radius: var(--rawasystem-radius-md);
	object-fit: cover;
	flex-shrink: 0;
}

.rawasystem-checkout-wrapper .rawasystem-slider-step--options .rawasystem-product-header {
	display: flex;
	align-items: center;
	gap: var(--rawasystem-space-3);
	margin-bottom: var(--rawasystem-space-5);
}

.rawasystem-checkout-wrapper .rawasystem-slider-step--options .rawasystem-product-name {
	font-size: var(--rawasystem-font-md);
	font-weight: var(--rawasystem-font-bold);
	color: var(--rawasystem-text);
}

.rawasystem-checkout-wrapper .rawasystem-slider-step--options .rawasystem-product-price {
	font-size: var(--rawasystem-font-sm);
	color: var(--rawasystem-primary);
	font-weight: var(--rawasystem-font-bold);
}

/* -- Step 4: Order Review -------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-step--review .rawasystem-review-section {
	margin-bottom: var(--rawasystem-space-5);
}

/* -- Step 5: Confirmation -------------------------------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-step--confirmation {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}

/* ==========================================================================
   5. Sliding Direction Classes
   ========================================================================== */

/* Applied via JS to the slider track when transitioning between steps */

/* -- Slide Left (going to next step, content moves left) ------------- */
.rawasystem-checkout-wrapper .rawasystem-slide-left .rawasystem-slider-track {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Slide Right (going to previous step, content moves right) ------- */
.rawasystem-checkout-wrapper .rawasystem-slider-track.rawasystem-slide-right {
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Fast slide (for rapid back/forward) ----------------------------- */
.rawasystem-checkout-wrapper .rawasystem-slider-track.rawasystem-slide-fast {
	transition-duration: 0.25s;
}

/* -- No transition (instant jump, used for initialization) ----------- */
.rawasystem-checkout-wrapper .rawasystem-slider-track.rawasystem-slide-instant {
	transition: none !important;
}

/* ==========================================================================
   6. Step Content Entrance Animations
   ========================================================================== */

/* When a step becomes active, its inner elements can animate in sequence */

.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > * {
	animation: rawasystem-slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(1) { animation-delay: 0.05s; }
.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(2) { animation-delay: 0.1s; }
.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(3) { animation-delay: 0.15s; }
.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(4) { animation-delay: 0.2s; }
.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(5) { animation-delay: 0.25s; }
.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(6) { animation-delay: 0.3s; }
.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(7) { animation-delay: 0.35s; }
.rawasystem-checkout-wrapper .rawasystem-slider-step--active .rawasystem-step-content > *:nth-child(8) { animation-delay: 0.4s; }

/* ==========================================================================
   7. Dynamic Height Transition
   ========================================================================== */

/* The container height is dynamically set via JS. This transition provides
   smooth resizing as steps of different heights become active. */

.rawasystem-checkout-wrapper .rawasystem-slider-container--animating {
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.rawasystem-checkout-wrapper .rawasystem-slider-container--no-animation {
	transition: none !important;
}

/* ==========================================================================
   8. Step Actions / Navigation Bar
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-step-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rawasystem-space-3);
	margin-top: var(--rawasystem-space-6);
	padding-top: var(--rawasystem-space-4);
	border-top: 1px solid var(--rawasystem-border);
}

.rawasystem-checkout-wrapper .rawasystem-step-actions--first {
	justify-content: flex-end;
	border-top: none;
	padding-top: 0;
}

.rawasystem-checkout-wrapper .rawasystem-step-actions--last {
	justify-content: center;
}

.rawasystem-checkout-wrapper .rawasystem-step-actions-spacer {
	flex: 1;
}

/* ==========================================================================
   9. Step Info Bar (Current step title + back link)
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-step-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--rawasystem-space-3) var(--rawasystem-space-6);
	background: var(--rawasystem-surface);
	border-bottom: 1px solid var(--rawasystem-border);
}

.rawasystem-checkout-wrapper .rawasystem-step-info-title {
	font-size: var(--rawasystem-font-sm);
	font-weight: var(--rawasystem-font-semibold);
	color: var(--rawasystem-text);
}

.rawasystem-checkout-wrapper .rawasystem-step-info-back {
	display: inline-flex;
	align-items: center;
	gap: var(--rawasystem-space-1);
	font-size: var(--rawasystem-font-xs);
	font-weight: var(--rawasystem-font-semibold);
	color: var(--rawasystem-primary);
	cursor: pointer;
	transition: var(--rawasystem-transition-fast);
}

.rawasystem-checkout-wrapper .rawasystem-step-info-back:hover {
	color: var(--rawasystem-primary-dark);
}

.rawasystem-checkout-wrapper .rawasystem-step-info-back svg {
	width: 14px;
	height: 14px;
}

/* ==========================================================================
   10. Form Footer (outside slider, fixed at bottom)
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-form-footer {
	padding: var(--rawasystem-space-4) var(--rawasystem-space-6);
	background: var(--rawasystem-bg);
	border-top: 1px solid var(--rawasystem-border);
}

.rawasystem-checkout-wrapper .rawasystem-form-footer--sticky {
	position: sticky;
	bottom: 0;
	z-index: var(--rawasystem-z-sticky);
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   11. Transition Helpers for Individual Elements
   ========================================================================== */

/* Smooth appearance when step content changes */
.rawasystem-checkout-wrapper .rawasystem-fade-enter {
	opacity: 0;
	transform: translateY(8px);
}

.rawasystem-checkout-wrapper .rawasystem-fade-enter-active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rawasystem-checkout-wrapper .rawasystem-fade-exit {
	opacity: 1;
	transform: translateY(0);
}

.rawasystem-checkout-wrapper .rawasystem-fade-exit-active {
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}