/**
 * RAWASYSTEM Express Checkout - Frontend Core
 *
 * Core CSS custom properties (design tokens), base reset, typography,
 * and foundational layout styles for the multi-step slider checkout form.
 *
 * All selectors are scoped inside .rawasystem-checkout-wrapper to prevent
 * WooCommerce / theme conflicts. Custom properties are defined on :root so
 * they can be overridden from the WordPress Customizer or admin settings.
 *
 * @package RAWASYSTEM_Express_Checkout
 * @version 1.0.0
 */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* -- Primary palette ------------------------------------------------ */
	--rawasystem-primary:          #6366f1;
	--rawasystem-primary-dark:     #4f46e5;
	--rawasystem-primary-light:    #818cf8;
	--rawasystem-primary-50:       #eef2ff;
	--rawasystem-primary-100:      #e0e7ff;
	--rawasystem-primary-rgb:      99, 102, 241;

	/* -- Secondary & accent -------------------------------------------- */
	--rawasystem-secondary:        #0ea5e9;
	--rawasystem-accent:           #f59e0b;

	/* -- Semantic colors ----------------------------------------------- */
	--rawasystem-success:          #10b981;
	--rawasystem-success-dark:     #059669;
	--rawasystem-success-light:    #34d399;
	--rawasystem-success-50:       #ecfdf5;
	--rawasystem-success-rgb:      16, 185, 129;
	--rawasystem-error:            #ef4444;
	--rawasystem-error-dark:       #dc2626;
	--rawasystem-error-light:      #f87171;
	--rawasystem-error-50:         #fef2f2;
	--rawasystem-error-rgb:        239, 68, 68;
	--rawasystem-warning:          #f59e0b;
	--rawasystem-warning-dark:     #d97706;
	--rawasystem-warning-light:    #fbbf24;
	--rawasystem-warning-50:       #fffbeb;
	--rawasystem-warning-rgb:      245, 158, 11;

	/* -- Button tokens ------------------------------------------------- */
	--rawasystem-btn-bg:           #6366f1;
	--rawasystem-btn-text:         #ffffff;
	--rawasystem-btn-hover-bg:     #4f46e5;
	--rawasystem-btn-active-bg:    #4338ca;

	/* -- Surface & background ------------------------------------------ */
	--rawasystem-bg:               #ffffff;
	--rawasystem-surface:          #f8fafc;
	--rawasystem-surface-hover:    #f1f5f9;
	--rawasystem-form-bg:          #ffffff;
	--rawasystem-form-border:      #e2e8f0;

	/* -- Border colors ------------------------------------------------- */
	--rawasystem-border:           #e2e8f0;
	--rawasystem-border-hover:     #cbd5e1;
	--rawasystem-border-focus:     #6366f1;

	/* -- Text colors --------------------------------------------------- */
	--rawasystem-text:             #1e293b;
	--rawasystem-text-secondary:   #64748b;
	--rawasystem-text-muted:       #94a3b8;
	--rawasystem-text-inverse:     #ffffff;

	/* -- Border radius ------------------------------------------------- */
	--rawasystem-radius-xs:        4px;
	--rawasystem-radius-sm:        6px;
	--rawasystem-radius-md:        10px;
	--rawasystem-radius-lg:        16px;
	--rawasystem-radius-xl:        24px;
	--rawasystem-radius-full:      9999px;

	/* -- Shadows ------------------------------------------------------- */
	--rawasystem-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.05);
	--rawasystem-shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--rawasystem-shadow-md:        0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--rawasystem-shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
	--rawasystem-shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
	--rawasystem-shadow-inner:     inset 0 2px 4px rgba(0, 0, 0, 0.04);
	--rawasystem-shadow-focus:     0 0 0 3px rgba(99, 102, 241, 0.15);
	--rawasystem-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.12);
	--rawasystem-shadow-focus-success: 0 0 0 3px rgba(16, 185, 129, 0.15);

	/* -- Transitions --------------------------------------------------- */
	--rawasystem-transition:       all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--rawasystem-transition-fast:  all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--rawasystem-transition-slow:  all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--rawasystem-transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* -- Typography scale ---------------------------------------------- */
	--rawasystem-font-xs:          0.75rem;    /* 12px */
	--rawasystem-font-sm:          0.8125rem;  /* 13px */
	--rawasystem-font-base:        0.875rem;   /* 14px */
	--rawasystem-font-md:          1rem;       /* 16px */
	--rawasystem-font-lg:          1.125rem;   /* 18px */
	--rawasystem-font-xl:          1.25rem;    /* 20px */
	--rawasystem-font-2xl:         1.5rem;     /* 24px */
	--rawasystem-font-3xl:         1.875rem;   /* 30px */

	/* -- Font weights -------------------------------------------------- */
	--rawasystem-font-normal:      400;
	--rawasystem-font-medium:      500;
	--rawasystem-font-semibold:    600;
	--rawasystem-font-bold:        700;
	--rawasystem-font-extrabold:   800;

	/* -- Spacing scale ------------------------------------------------- */
	--rawasystem-space-0:          0;
	--rawasystem-space-1:          4px;
	--rawasystem-space-2:          8px;
	--rawasystem-space-3:          12px;
	--rawasystem-space-4:          16px;
	--rawasystem-space-5:          20px;
	--rawasystem-space-6:          24px;
	--rawasystem-space-8:          32px;
	--rawasystem-space-10:         40px;
	--rawasystem-space-12:         48px;
	--rawasystem-space-16:         64px;

	/* -- Legacy spacing aliases (backwards compat) -------------------- */
	--rawasystem-space-xs:         4px;
	--rawasystem-space-sm:         8px;
	--rawasystem-space-md:         12px;
	--rawasystem-space-lg:         16px;
	--rawasystem-space-xl:         20px;
	--rawasystem-space-2xl:        24px;

	/* -- Layout -------------------------------------------------------- */
	--rawasystem-radius:           12px;
	--rawasystem-radius-sm:        6px;
	--rawasystem-form-width:       520px;
	--rawasystem-input-height:     48px;
	--rawasystem-button-height:    48px;
	--rawasystem-touch-target:     44px;

	/* -- Z-index scale ------------------------------------------------- */
	--rawasystem-z-base:           1;
	--rawasystem-z-dropdown:       10;
	--rawasystem-z-sticky:         20;
	--rawasystem-z-overlay:        30;
	--rawasystem-z-modal:          40;
	--rawasystem-z-tooltip:        50;
}

/* ==========================================================================
   2. Wrapper & Base Container
   ========================================================================== */

.rawasystem-checkout-wrapper {
	all: initial;
	display: block;
	font-family: inherit;
	font-size: var(--rawasystem-font-base);
	line-height: 1.6;
	color: var(--rawasystem-text);
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ==========================================================================
   3. Scoped Reset — All resets confined to the wrapper
   ========================================================================== */

.rawasystem-checkout-wrapper *,
.rawasystem-checkout-wrapper *::before,
.rawasystem-checkout-wrapper *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.rawasystem-checkout-wrapper input,
.rawasystem-checkout-wrapper select,
.rawasystem-checkout-wrapper textarea,
.rawasystem-checkout-wrapper button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	border: none;
	outline: none;
	background: none;
	-webkit-appearance: none;
	appearance: none;
}

.rawasystem-checkout-wrapper button {
	cursor: pointer;
}

.rawasystem-checkout-wrapper a {
	color: var(--rawasystem-primary);
	text-decoration: none;
	transition: var(--rawasystem-transition-fast);
}

.rawasystem-checkout-wrapper a:hover {
	color: var(--rawasystem-primary-dark);
	text-decoration: underline;
}

.rawasystem-checkout-wrapper img {
	max-width: 100%;
	height: auto;
	display: block;
}

.rawasystem-checkout-wrapper ul,
.rawasystem-checkout-wrapper ol {
	list-style: none;
}

.rawasystem-checkout-wrapper table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

/* ==========================================================================
   4. RTL Base — Arabic layout support
   ========================================================================== */

.rawasystem-checkout-wrapper[dir="rtl"],
.rawasystem-checkout-wrapper .rawasystem-rtl {
	direction: rtl;
	text-align: right;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-input,
.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-qty-input,
.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-floating-input,
.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-floating-textarea {
	text-align: right;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-slider-track {
	flex-direction: row-reverse;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-floating-label {
	left: auto;
	right: 14px;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-select-arrow {
	right: auto;
	left: 14px;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-progress-fill {
	left: auto;
	right: 0;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-review-item-value {
	text-align: left;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-upsell-card--active::after {
	right: auto;
	left: var(--rawasystem-space-sm);
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-upsell-save {
	margin-left: 0;
	margin-right: var(--rawasystem-space-xs);
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-btn-prev svg,
.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-btn-next svg {
	transform: scaleX(-1);
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-quantity-control {
	flex-direction: row-reverse;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-qty-input {
	border-left: none;
	border-right: 1px solid var(--rawasystem-border);
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-qty-btn:first-child {
	border-left: 1px solid var(--rawasystem-border);
	border-right: none;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-qty-btn:last-child {
	border-right: 1px solid var(--rawasystem-border);
	border-left: none;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-urgency-bar svg {
	margin-right: 0;
	margin-left: var(--rawasystem-space-1);
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-coupon-toggle svg {
	margin-right: 0;
	margin-left: var(--rawasystem-space-1);
}

/* ==========================================================================
   5. Form Card
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-form-card {
	background: var(--rawasystem-form-bg);
	border-radius: var(--rawasystem-radius-lg);
	box-shadow: var(--rawasystem-shadow-lg);
	overflow: hidden;
	transition: var(--rawasystem-transition-slow);
}

.rawasystem-checkout-wrapper .rawasystem-form-card:hover {
	box-shadow: var(--rawasystem-shadow-xl);
}

/* ==========================================================================
   6. Form Header
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-form-header {
	padding: var(--rawasystem-space-6) var(--rawasystem-space-6) 0;
}

/* ==========================================================================
   7. Typography — Scoped to the checkout form
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-form-title {
	font-size: var(--rawasystem-font-xl);
	font-weight: var(--rawasystem-font-bold);
	color: var(--rawasystem-text);
	line-height: 1.3;
	margin-bottom: var(--rawasystem-space-1);
	letter-spacing: -0.01em;
}

.rawasystem-checkout-wrapper .rawasystem-form-subtitle {
	font-size: var(--rawasystem-font-sm);
	color: var(--rawasystem-text-secondary);
	margin-bottom: var(--rawasystem-space-4);
	line-height: 1.5;
}

.rawasystem-checkout-wrapper .rawasystem-section-title {
	font-size: var(--rawasystem-font-md);
	font-weight: var(--rawasystem-font-semibold);
	color: var(--rawasystem-text);
	margin-bottom: var(--rawasystem-space-3);
	letter-spacing: -0.01em;
}

.rawasystem-checkout-wrapper .rawasystem-section-description {
	font-size: var(--rawasystem-font-sm);
	color: var(--rawasystem-text-secondary);
	margin-bottom: var(--rawasystem-space-4);
	line-height: 1.5;
}

.rawasystem-checkout-wrapper .rawasystem-input-label {
	display: block;
	font-size: var(--rawasystem-font-sm);
	font-weight: var(--rawasystem-font-semibold);
	color: var(--rawasystem-text-secondary);
	margin-bottom: var(--rawasystem-space-1);
	letter-spacing: 0.01em;
}

.rawasystem-checkout-wrapper .rawasystem-label-required {
	color: var(--rawasystem-error);
	margin-left: 2px;
}

.rawasystem-checkout-wrapper[dir="rtl"] .rawasystem-label-required {
	margin-left: 0;
	margin-right: 2px;
}

.rawasystem-checkout-wrapper h1,
.rawasystem-checkout-wrapper h2,
.rawasystem-checkout-wrapper h3,
.rawasystem-checkout-wrapper h4,
.rawasystem-checkout-wrapper h5,
.rawasystem-checkout-wrapper h6 {
	color: var(--rawasystem-text);
	font-weight: var(--rawasystem-font-bold);
	line-height: 1.3;
}

.rawasystem-checkout-wrapper p {
	margin-bottom: var(--rawasystem-space-3);
	color: var(--rawasystem-text-secondary);
	font-size: var(--rawasystem-font-sm);
	line-height: 1.6;
}

.rawasystem-checkout-wrapper small {
	font-size: var(--rawasystem-font-xs);
	color: var(--rawasystem-text-muted);
}

.rawasystem-checkout-wrapper strong,
.rawasystem-checkout-wrapper b {
	font-weight: var(--rawasystem-font-semibold);
	color: var(--rawasystem-text);
}

/* ==========================================================================
   8. Utility Classes
   ========================================================================== */

.rawasystem-checkout-wrapper .rawasystem-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rawasystem-checkout-wrapper .rawasystem-text-center {
	text-align: center;
}

.rawasystem-checkout-wrapper .rawasystem-text-right {
	text-align: right;
}

.rawasystem-checkout-wrapper .rawasystem-text-left {
	text-align: left;
}

.rawasystem-checkout-wrapper .rawasystem-text-muted {
	color: var(--rawasystem-text-muted);
}

.rawasystem-checkout-wrapper .rawasystem-text-primary {
	color: var(--rawasystem-primary);
}

.rawasystem-checkout-wrapper .rawasystem-text-success {
	color: var(--rawasystem-success);
}

.rawasystem-checkout-wrapper .rawasystem-text-error {
	color: var(--rawasystem-error);
}

.rawasystem-checkout-wrapper .rawasystem-text-warning {
	color: var(--rawasystem-warning);
}

.rawasystem-checkout-wrapper .rawasystem-text-sm {
	font-size: var(--rawasystem-font-sm);
}

.rawasystem-checkout-wrapper .rawasystem-text-xs {
	font-size: var(--rawasystem-font-xs);
}

.rawasystem-checkout-wrapper .rawasystem-font-semibold {
	font-weight: var(--rawasystem-font-semibold);
}

.rawasystem-checkout-wrapper .rawasystem-font-bold {
	font-weight: var(--rawasystem-font-bold);
}

.rawasystem-checkout-wrapper .rawasystem-mt-1 { margin-top: var(--rawasystem-space-1); }
.rawasystem-checkout-wrapper .rawasystem-mt-2 { margin-top: var(--rawasystem-space-2); }
.rawasystem-checkout-wrapper .rawasystem-mt-3 { margin-top: var(--rawasystem-space-3); }
.rawasystem-checkout-wrapper .rawasystem-mt-4 { margin-top: var(--rawasystem-space-4); }
.rawasystem-checkout-wrapper .rawasystem-mt-5 { margin-top: var(--rawasystem-space-5); }
.rawasystem-checkout-wrapper .rawasystem-mt-6 { margin-top: var(--rawasystem-space-6); }
.rawasystem-checkout-wrapper .rawasystem-mt-8 { margin-top: var(--rawasystem-space-8); }

.rawasystem-checkout-wrapper .rawasystem-mb-1 { margin-bottom: var(--rawasystem-space-1); }
.rawasystem-checkout-wrapper .rawasystem-mb-2 { margin-bottom: var(--rawasystem-space-2); }
.rawasystem-checkout-wrapper .rawasystem-mb-3 { margin-bottom: var(--rawasystem-space-3); }
.rawasystem-checkout-wrapper .rawasystem-mb-4 { margin-bottom: var(--rawasystem-space-4); }
.rawasystem-checkout-wrapper .rawasystem-mb-5 { margin-bottom: var(--rawasystem-space-5); }
.rawasystem-checkout-wrapper .rawasystem-mb-6 { margin-bottom: var(--rawasystem-space-6); }
.rawasystem-checkout-wrapper .rawasystem-mb-8 { margin-bottom: var(--rawasystem-space-8); }

.rawasystem-checkout-wrapper .rawasystem-pt-4 { padding-top: var(--rawasystem-space-4); }
.rawasystem-checkout-wrapper .rawasystem-pb-4 { padding-bottom: var(--rawasystem-space-4); }

/* Legacy aliases */
.rawasystem-checkout-wrapper .rawasystem-mt-sm  { margin-top: var(--rawasystem-space-sm); }
.rawasystem-checkout-wrapper .rawasystem-mt-md  { margin-top: var(--rawasystem-space-md); }
.rawasystem-checkout-wrapper .rawasystem-mt-lg  { margin-top: var(--rawasystem-space-lg); }
.rawasystem-checkout-wrapper .rawasystem-mb-sm  { margin-bottom: var(--rawasystem-space-sm); }
.rawasystem-checkout-wrapper .rawasystem-mb-md  { margin-bottom: var(--rawasystem-space-md); }
.rawasystem-checkout-wrapper .rawasystem-mb-lg  { margin-bottom: var(--rawasystem-space-lg); }

.rawasystem-checkout-wrapper .rawasystem-hidden {
	display: none !important;
}

.rawasystem-checkout-wrapper .rawasystem-visible {
	display: block;
}

.rawasystem-checkout-wrapper .rawasystem-flex {
	display: flex;
}

.rawasystem-checkout-wrapper .rawasystem-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rawasystem-checkout-wrapper .rawasystem-flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rawasystem-checkout-wrapper .rawasystem-gap-2 { gap: var(--rawasystem-space-2); }
.rawasystem-checkout-wrapper .rawasystem-gap-3 { gap: var(--rawasystem-space-3); }
.rawasystem-checkout-wrapper .rawasystem-gap-4 { gap: var(--rawasystem-space-4); }

.rawasystem-checkout-wrapper .rawasystem-w-full { width: 100%; }