/* ==========================================================================
   Documents Generator — Purple accent overrides & wizard components
   Loaded AFTER components.css, scoped to .docs-page
   ========================================================================== */

/* ===== PURPLE ACCENT OVERRIDES ===== */
.docs-page {
  --c-primary: #7c3aed;
  --c-primary-light: #8b5cf6;
  --c-primary-dark: #6d28d9;
  --c-primary-bg: rgba(124, 58, 237, 0.08);
}

/* ===== WIZARD CONTAINER ===== */
.wizard {
  max-width: 720px;
  margin: 0 auto;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-2xl);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  position: relative;
}

/* ===== STEP INDICATOR ===== */
.wizard__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.wizard__step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-border);
  transition: all 0.3s var(--ease);
}

.wizard__step-dot--active {
  background: var(--c-primary);
  box-shadow: 0 0 0 4px var(--c-primary-bg);
  width: 12px;
  height: 12px;
}

.wizard__step-dot--done {
  background: var(--c-primary);
}

.wizard__step-line {
  width: 32px;
  height: 2px;
  background: var(--c-border);
  transition: background 0.3s var(--ease);
}

.wizard__step-line--done {
  background: var(--c-primary);
}

/* ===== STEP CONTENT ===== */
.wizard__panel {
  display: none;
  animation: fadeUp 0.3s ease-out;
}

.wizard__panel--active {
  display: block;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wizard__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  margin-bottom: var(--sp-2);
}

.wizard__subtitle {
  font-size: var(--fs-sm);
  color: var(--c-text-sec);
  margin-bottom: var(--sp-6);
}

/* ===== FORM FIELDS ===== */
.wz-field {
  margin-bottom: var(--sp-4);
}

.wz-field__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
  margin-bottom: var(--sp-1);
}

.wz-field__hint {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}

.wz-field__input,
.wz-field__select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  background: var(--c-bg);
  color: var(--c-text);
  transition: all var(--dur) var(--ease);
}

.wz-field__input:focus,
.wz-field__select:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-bg);
}

.wz-field__input--error {
  border-color: var(--c-red);
}

.wz-field__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}

/* ===== INN AUTO-FILL STATUS ===== */
.wz-inn-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  margin-top: var(--sp-1);
  transition: all 0.3s ease;
}

.wz-inn-status--loading { color: var(--c-text-muted); }
.wz-inn-status--ok { color: var(--c-green); }
.wz-inn-status--error { color: var(--c-red); }

/* ===== CHECKBOXES GROUP ===== */
.wz-checks {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.wz-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  user-select: none;
}

.wz-check:hover {
  border-color: var(--c-primary-light);
  background: var(--c-primary-bg);
}

.wz-check--checked {
  border-color: var(--c-primary);
  background: var(--c-primary-bg);
}

.wz-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--c-primary);
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
}

.wz-check__text {
  flex: 1;
}

.wz-check__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

.wz-check__desc {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: 2px;
}

/* ===== NAVIGATION BUTTONS ===== */
.wizard__nav {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}

.wizard__nav-btn {
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}

.wizard__nav-btn--back {
  background: transparent;
  color: var(--c-text-sec);
  border: 1.5px solid var(--c-border);
}

.wizard__nav-btn--back:hover {
  border-color: var(--c-text-muted);
  color: var(--c-text);
}

.wizard__nav-btn--next {
  background: var(--c-primary);
  color: #fff;
  border: none;
  padding: var(--sp-3) var(--sp-8);
}

.wizard__nav-btn--next:hover {
  background: var(--c-primary-dark);
}

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

/* ===== SUMMARY / REVIEW STEP ===== */
.wz-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.wz-summary__section {
  padding: var(--sp-4);
  background: var(--c-bg);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}

.wz-summary__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}

.wz-summary__row {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.wz-summary__label {
  color: var(--c-text-muted);
  min-width: 140px;
  flex-shrink: 0;
}

.wz-summary__value {
  color: var(--c-text);
}

/* ===== DOCUMENTS LIST ===== */
.wz-doclist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.wz-doclist__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.wz-doclist__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--c-primary-bg);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* ===== PAYMENT CTA ===== */
.wizard__pay-cta {
  text-align: center;
  padding: var(--sp-6) 0 0;
}

.wizard__pay-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-10);
  background: var(--c-primary);
  color: #fff;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  border-radius: var(--r-xl);
  border: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.wizard__pay-btn:hover {
  background: var(--c-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.3);
}

.wizard__pay-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.wizard__pay-hint {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  margin-top: var(--sp-3);
}

/* ===== DOWNLOAD RESULTS ===== */
.docs-result {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.docs-result__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--sp-6);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.04));
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.docs-result__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-2);
}

.docs-result__sub {
  color: var(--c-text-sec);
  margin-bottom: var(--sp-8);
}

.docs-result__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  text-align: left;
  margin-bottom: var(--sp-8);
}

.docs-result__card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  color: var(--c-text);
}

.docs-result__card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.docs-result__card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-primary-bg);
  color: var(--c-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.docs-result__card-text {
  flex: 1;
  min-width: 0;
}

.docs-result__card-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}

.docs-result__card-format {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ===== PRINT OVERRIDES ===== */
@media print {
  .wizard, .wizard__steps, .wizard__nav {
    display: none !important;
  }
  .docs-result {
    max-width: none;
  }
  .docs-result__card {
    border: 1px solid #ddd;
    box-shadow: none;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .wizard {
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
    border-radius: var(--r-xl);
  }

  .wz-field__row {
    grid-template-columns: 1fr;
  }

  .wz-summary__row {
    flex-direction: column;
    gap: 2px;
  }

  .wz-summary__label {
    min-width: auto;
    font-weight: var(--fw-medium);
  }

  .docs-result__grid {
    grid-template-columns: 1fr;
  }

  .wizard__pay-btn {
    width: 100%;
    justify-content: center;
  }
}