/* =============================================================================
 * XEGORA Configurator Xerox — Wizard Base Styles
 *
 * CSS variables (brand defaults), container reset, typography, progress bar,
 * mobile sidebar toggle, buttons, placeholders for unimplemented steps.
 *
 * The variables declared on .xcx-wizard cascade into every component file
 * (wizard-themes.css, wizard-step-1.css). Overrides come from:
 *   1. wizard-themes.css (loaded after this file in XCX_Frontend)
 *   2. wp_add_inline_style injected by admin Settings (Faza 8)
 *
 * @package XegoraConfiguratorXerox
 * @since   0.2.0
 * ============================================================================= */

/* === CSS Variables (XEGORA brand defaults) === */
.xcx-wizard {
  /* Core 6 — overridable from admin Settings (Faza 8) */
  --xcx-primary:    #005D9B;
  --xcx-secondary:  #C02222;
  --xcx-accent:     #FF7F00;
  --xcx-bg:         #FFFFFF;
  --xcx-text:       #212529;
  --xcx-border:     #DEE2E6;

  /* Derived neutrals (not configurable, support utilities) */
  --xcx-on-primary: #FFFFFF;
  --xcx-bg-soft:    #F8F9FA;
  --xcx-text-muted: #6C757D;

  /* Spacing scale */
  --xcx-space-xs: 4px;
  --xcx-space-sm: 8px;
  --xcx-space-md: 16px;
  --xcx-space-lg: 24px;
  --xcx-space-xl: 32px;

  /* Typography */
  --xcx-font-family:    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --xcx-font-size-base: 16px;
  --xcx-font-size-sm:   14px;
  --xcx-font-size-lg:   18px;
  --xcx-line-height:    1.5;

  /* Radii */
  --xcx-radius-sm: 4px;
  --xcx-radius-md: 8px;
  --xcx-radius-lg: 12px;

  /* Shadows */
  --xcx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --xcx-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --xcx-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

  /* Motion */
  --xcx-transition: 200ms ease-out;

  /* Layout (overridden per data-layout) */
  --xcx-sidebar-width: 280px;
}

.xcx-wizard[data-layout="compact"]  { --xcx-sidebar-width: 240px; }
.xcx-wizard[data-layout="spacious"] { --xcx-sidebar-width: 320px; }

/* === Container reset (scoped to .xcx-wizard, never global) === */
.xcx-wizard,
.xcx-wizard *,
.xcx-wizard *::before,
.xcx-wizard *::after {
  box-sizing: border-box;
}

.xcx-wizard {
  font-family: var(--xcx-font-family);
  font-size: var(--xcx-font-size-base);
  line-height: var(--xcx-line-height);
  color: var(--xcx-text);
  background: var(--xcx-bg);
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--xcx-space-lg);
}

/* === Accessibility: focus visible === */
.xcx-wizard :focus-visible {
  outline: 2px solid var(--xcx-primary);
  outline-offset: 2px;
}

/* === Hidden utility (single allowed !important) === */
.xcx-wizard [hidden] {
  display: none !important;
}

/* === Typography (scoped to wizard) === */
.xcx-wizard h1,
.xcx-wizard h2,
.xcx-wizard h3 {
  margin: 0 0 var(--xcx-space-md) 0;
  font-weight: 600;
  color: var(--xcx-text);
}

.xcx-wizard h2 {
  font-size: 24px;
}

.xcx-wizard h3 {
  font-size: var(--xcx-font-size-lg);
}

.xcx-wizard p {
  margin: 0 0 var(--xcx-space-md) 0;
}

/* === Progress bar === */
.xcx-progress {
  margin-bottom: var(--xcx-space-xl);
}

.xcx-progress-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--xcx-space-md);
}

.xcx-progress-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--xcx-space-sm);
  position: relative;
  padding: var(--xcx-space-sm) 0;
}

/* Connector line between consecutive steps */
.xcx-progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: calc(-1 * var(--xcx-space-md));
  top: 50%;
  width: var(--xcx-space-md);
  height: 2px;
  background: var(--xcx-border);
}

.xcx-progress-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--xcx-bg);
  border: 2px solid var(--xcx-border);
  color: var(--xcx-text);
  font-weight: 600;
  font-size: var(--xcx-font-size-sm);
  transition: background var(--xcx-transition), border-color var(--xcx-transition), color var(--xcx-transition);
  flex-shrink: 0;
}

.xcx-progress-step.xcx-active .xcx-progress-num {
  background: var(--xcx-primary);
  border-color: var(--xcx-primary);
  color: var(--xcx-on-primary);
}

.xcx-progress-step.xcx-completed .xcx-progress-num {
  background: var(--xcx-secondary);
  border-color: var(--xcx-secondary);
  color: var(--xcx-on-primary);
}

.xcx-icon-check {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

.xcx-progress-label {
  color: var(--xcx-text);
  font-size: var(--xcx-font-size-sm);
}

.xcx-progress-step.xcx-active .xcx-progress-label {
  font-weight: 600;
  color: var(--xcx-primary);
}

/* === Mobile sidebar toggle (visible only < 768px via wizard-step-1.css) === */
.xcx-mobile-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: var(--xcx-space-sm) var(--xcx-space-md);
  background: var(--xcx-bg);
  border: 1px solid var(--xcx-border);
  border-radius: var(--xcx-radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--xcx-font-size-base);
  color: var(--xcx-text);
  margin-bottom: var(--xcx-space-md);
  transition: background var(--xcx-transition);
}

.xcx-mobile-toggle:hover {
  background: var(--xcx-bg-soft);
}

.xcx-mobile-toggle-icon {
  font-size: 1.25em;
  line-height: 1;
}

/* === Buttons (base) === */
.xcx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--xcx-space-xs);
  padding: var(--xcx-space-sm) var(--xcx-space-md);
  font-family: inherit;
  font-size: var(--xcx-font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--xcx-radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--xcx-transition), border-color var(--xcx-transition), color var(--xcx-transition), box-shadow var(--xcx-transition);
  white-space: nowrap;
}

.xcx-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.xcx-btn-primary {
  background: var(--xcx-primary);
  border-color: var(--xcx-primary);
  color: var(--xcx-on-primary);
}

.xcx-btn-primary:hover,
.xcx-btn-primary:focus {
  background: var(--xcx-secondary, #C02222);
  border-color: var(--xcx-secondary, #C02222);
  color: #ffffff;
}

.xcx-btn-secondary {
  background: transparent;
  border-color: var(--xcx-border);
  color: var(--xcx-text);
}

.xcx-btn-secondary:hover {
  background: var(--xcx-bg-soft);
  border-color: var(--xcx-text);
}

/* === Placeholder for unimplemented steps (Faze 5/6) === */
.xcx-placeholder {
  padding: var(--xcx-space-xl);
  text-align: center;
  color: var(--xcx-text-muted);
  font-style: italic;
  border: 2px dashed var(--xcx-border);
  border-radius: var(--xcx-radius-md);
}

/* === Generic step footer (sticky on mobile, static on desktop) === */
.xcx-step-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--xcx-space-md);
  padding: var(--xcx-space-sm) var(--xcx-space-md);
  margin-top: var(--xcx-space-md);
  background: var(--xcx-bg);
  border-top: 1px solid var(--xcx-border);
}

.xcx-step1-hint,
.xcx-step3-hint {
  font-size: var(--xcx-font-size-sm);
  color: var(--xcx-text-muted);
}

.xcx-step1-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: var(--xcx-shadow-sm);
}

.xcx-step3-footer {
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .xcx-step1-footer {
    position: static;
    box-shadow: none;
  }
}

/* === Step visibility (driven by .xcx-wizard[data-step]) === */
.xcx-wizard[data-step="1"] .xcx-step.xcx-step-2,
.xcx-wizard[data-step="1"] .xcx-step.xcx-step-3,
.xcx-wizard[data-step="2"] .xcx-step.xcx-step-1,
.xcx-wizard[data-step="2"] .xcx-step.xcx-step-3,
.xcx-wizard[data-step="3"] .xcx-step.xcx-step-1,
.xcx-wizard[data-step="3"] .xcx-step.xcx-step-2 {
  display: none;
}