/*
 * ============================================================================
 * Copyright (c) 2026 ATH SOLUTIONS (PTY) LTD. All rights reserved.
 * KwaZulu-Natal, Republic of South Africa.
 * ============================================================================
 *
 * @BEGIN Developer Log Header Block
 * @FILENAME: wizard.css
 * @TITLE: PATHWRITE
 * @DESCRIPTION: Book creation wizard view - step progress bars, sticky action bar, payment option cards, photo-role cards, survey questions, and photos grid.
 * @AUTHOR: Ary van der Pijl
 * @COMPANY: ATH SOLUTIONS (PTY) LTD
 * @WEBSITE: https://www.ath.solutions/
 * @EMAIL: info@ath.solutions
 * @COPYRIGHT: All Rights Reserved
 * @LICENSE: ATH SOLUTIONS - PROPRIETARY SOFTWARE LICENCE AGREEMENT (https://www.ath.solutions/documents/ath_solutions_software_licence_agreement.pdf)
 *
 * BEGIN CHANGELOG
 * @IMPORTANT NOTICE: Developers working on these files MUST update and maintain the Developers Change Log, failure to do is not an option:
 * !==================================================================================================================================================================
 * VERSION 1.0.3
 * - File Modified | Ary van der Pijl | 2026-09-03 | Gap Analysis v4.0 §4.0: added .wizard-preview-progress-track (max-width:360px;height:6px) - replaces step5-preview.php's inline style="max-width:360px;height:6px" on the preview-generation progress bar's track, same class of fix as VERSION 1.0.2's filter-bar classes. |
 * VERSION 1.0.2
 * - File Modified | Ary van der Pijl | 2026-08-15 | Added .wizard-filter-search/.wizard-filter-select - replaces step1-template.php's 3x inline style="max-width:..." (hard-constraint violation), fixed while retrofitting the page for multi-language support. |
 * VERSION 1.0.1
 * - File Modified | Ary van der Pijl | 2026-08-06 | Phase 19 component library audit: added .dropzone drag-over state styles - the photo upload step's view header documented drag-and-drop support but no such markup or styling existed. |
 * VERSION 1.0.0
 * + File Created | Ary van der Pijl | 2026-08-06 | Extracted from main.css as part of the Phase 17 CSS architecture split (9-file hierarchy per STD-E). Two differently-named wizard progress bar implementations (.sf-wizard-* and .wizard-*) both live here unmerged - kept as-is, not deduplicated, since collapsing them into one is a design decision outside this splits scope. |
 * ==================================================================================================================================================================!
 * END CHANGELOG
 */

/* ─── Wizard Filter Bar ──────────────────────────────────────────────────── */

.wizard-filter-search {
  max-width: 280px;
}

.wizard-filter-select {
  max-width: 180px;
}

.wizard-preview-progress-track {
  max-width: 360px;
  height: 6px;
}

.checkout-summary-sticky {
  top: 80px;
}

.wizard-confirmation-card {
  max-width: 420px;
}

/* step-survey.php/survey.js toggle visibility via classList.add/remove('hidden') (not Bootstrap's
   d-none, which the rest of the wizard uses) but no CSS rule for .hidden existed anywhere in the
   project - the toggle has been a complete no-op since this page was written, so #survey-loading,
   #survey-form-wrapper and #survey-empty could all render simultaneously. Real, separate bug found
   while fixing this file's inline style="..." violations (Gap Analysis v4.0 §4.0). */
.hidden {
  display: none;
}

/* ─── Wizard Progress Bar ────────────────────────────────────────────────── */

.sf-wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
}

.sf-wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sf-wizard-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  transition: background .2s, border-color .2s, color .2s;
}

.sf-wizard-step.active .sf-wizard-step-circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.sf-wizard-step.complete .sf-wizard-step-circle {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.sf-wizard-step-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sf-wizard-step.active .sf-wizard-step-label {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.sf-wizard-step.complete .sf-wizard-step-label {
  color: var(--color-success);
}

.sf-wizard-connector {
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin-bottom: 22px;
  /* align with circles */
}


/* ─── Payment Option Cards ───────────────────────────────────────────────── */

.sf-payment-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s;
}

.sf-payment-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}


/* ─── Sticky wizard action bar ───────────────────────────────────────────── */

.sf-sticky-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  position: sticky;
  bottom: var(--space-4);
  z-index: 50;
}


/* ─── Photo role cards ───────────────────────────────────────────────────── */

.sf-photo-role-card {
  transition: box-shadow .15s;
}

.sf-photo-role-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.sf-photo-preview:hover {
  border-color: var(--color-primary) !important;
}


/* ─── Wizard progress bar ────────────────────────────────────────────────── */

.wizard-progress {
  overflow-x: auto;
}

.wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 480px;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  position: relative;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}

.wizard-step+.wizard-step::before {
  content: '';
  position: absolute;
  left: -50%;
  top: 18px;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}

.wizard-step .material-icons-round {
  font-size: 1.25rem;
  color: var(--color-text-subtle);
  z-index: 1;
}

.wizard-step.completed .material-icons-round {
  color: var(--color-success);
}

.wizard-step.active {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.wizard-step.active .material-icons-round {
  color: var(--color-primary);
}


/* ─── Survey questions ───────────────────────────────────────────────────── */

.survey-questions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.required-star {
  color: var(--color-danger);
}

.toggle-group {
  display: flex;
  gap: var(--space-3);
}

.toggle-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.toggle-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}


/* ─── Photos grid ────────────────────────────────────────────────────────── */

.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.photo-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  position: relative;
  transition: box-shadow var(--transition-fast);
}

.photo-card:hover {
  box-shadow: var(--shadow-md);
}

.photo-thumbnail {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-surface-2);
}

.photo-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-info {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.photo-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.photo-relationship {
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  align-self: flex-start;
}

.btn-delete-photo {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(255, 255, 255, .85);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  border: none;
  cursor: pointer;
  color: var(--color-danger);
}

.photo-card:hover .btn-delete-photo {
  opacity: 1;
}

.ai-populate-cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ai-populate-icon {
  font-size: 2rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.ai-populate-text {
  flex: 1;
}


/* ─── Photo upload dropzone ──────────────────────────────────────────────── */

.dropzone {
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.dropzone.dropzone-active {
  background: var(--color-primary-light);
  outline: 2px dashed var(--color-primary);
  outline-offset: 2px;
}