/* ==========================================================================
   Joz Social Co — Questionnaire / Booking Form (questionnaire.css)
   ========================================================================== */

/* ======================================================================
   HERO
   ====================================================================== */

.q-hero {
  padding-top: calc(var(--nav-height) + var(--space-20));
  padding-bottom: var(--space-12);
  text-align: center;
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.q-hero .eyebrow {
  color: var(--color-gold);
}

.q-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--type-4xl), 5vw, var(--type-6xl));
  font-style: italic;
  letter-spacing: var(--ls-tight);
  color: var(--text-on-dark);
  margin-top: var(--space-3);
}

.q-hero p {
  max-width: 560px;
  margin: var(--space-4) auto 0;
  font-size: var(--type-lg);
  color: var(--text-on-dark-muted);
  line-height: var(--lh-body);
}

/* ======================================================================
   SECTION WRAPPER
   ====================================================================== */

.q-section {
  padding: var(--space-12) 0 var(--space-20);
  background: var(--bg-primary);
}

/* ======================================================================
   PROGRESS BAR
   ====================================================================== */

.q-progress {
  height: 3px;
  background: var(--color-sand);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-8);
  overflow: hidden;
}

.q-progress-bar {
  height: 100%;
  width: 20%;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ======================================================================
   STEP INDICATORS
   ====================================================================== */

.q-steps {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}

.q-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--type-sm);
}

.q-step:hover {
  color: var(--text-primary);
}

.q-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--type-xs);
  font-weight: var(--fw-bold);
  border: 2px solid var(--color-light-gray);
  color: var(--text-muted);
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.q-step-label {
  display: none;
}

.q-step.active .q-step-number {
  background: var(--gradient-gold);
  border-color: var(--color-gold);
  color: #fff;
}

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

.q-step.completed .q-step-number {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

.q-step.completed {
  color: var(--color-gold-dark);
}

@media (min-width: 768px) {
  .q-step-label {
    display: inline;
  }
  .q-steps {
    gap: var(--space-4);
  }
}

/* ======================================================================
   PANELS
   ====================================================================== */

.q-panel {
  display: none;
  animation: qPanelIn 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.q-panel.active {
  display: block;
}

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

.q-panel-header {
  margin-bottom: var(--space-8);
}

.q-panel-header h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--type-3xl), 3vw, var(--type-4xl));
  font-style: italic;
  color: var(--text-primary);
}

.q-panel-header p {
  margin-top: var(--space-2);
  font-size: var(--type-lg);
  color: var(--text-secondary);
}

/* ======================================================================
   FIELDS
   ====================================================================== */

.q-field {
  margin-bottom: var(--space-6);
}

.q-field label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.q-required {
  color: var(--color-gold);
}

.q-field input[type="text"],
.q-field input[type="email"],
.q-field input[type="tel"],
.q-field input[type="number"],
.q-field input[type="date"],
.q-field input[type="time"],
.q-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--type-base);
  color: var(--text-primary);
  background: #fff;
  border: 1.5px solid var(--color-beige);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.q-field input:focus,
.q-field textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-muted);
}

.q-field input::placeholder,
.q-field textarea::placeholder {
  color: var(--color-light-gray);
}

.q-field textarea {
  resize: vertical;
  min-height: 80px;
}

.q-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .q-field-row {
    grid-template-columns: 1fr 1fr;
  }
}

.q-field-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-xs);
  color: var(--text-muted);
}

.q-other-input {
  margin-top: var(--space-2);
}

/* Validation error */
.q-field.has-error input,
.q-field.has-error textarea {
  border-color: #d44;
  box-shadow: 0 0 0 3px rgba(221, 68, 68, 0.1);
}

.q-field .q-error-msg {
  display: none;
  margin-top: var(--space-1);
  font-size: var(--type-xs);
  color: #d44;
  font-weight: var(--fw-medium);
}

.q-field.has-error .q-error-msg {
  display: block;
}

/* ======================================================================
   CHIP SELECTOR (event type, style, props vibe, etc.)
   ====================================================================== */

.q-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.q-chip {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: #fff;
  border: 1.5px solid var(--color-beige);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.125rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.q-chip:hover {
  border-color: var(--color-gold-light);
  color: var(--text-primary);
}

.q-chip.selected {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
  font-weight: var(--fw-semibold);
  box-shadow: 0 2px 8px rgba(198, 169, 107, 0.3);
}

/* ======================================================================
   PACKAGE SELECTOR CARDS
   ====================================================================== */

.q-package-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .q-package-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .q-package-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.q-package-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  background: #fff;
  border: 2px solid var(--color-beige);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  font-family: var(--font-body);
  position: relative;
  overflow: hidden;
}

.q-package-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.q-package-card > * {
  position: relative;
  z-index: 1;
}

.q-package-card:hover {
  border-color: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.q-package-card.selected {
  border-color: var(--color-gold);
  box-shadow: 0 4px 20px rgba(198, 169, 107, 0.3);
}

.q-package-card.selected::before {
  opacity: 0.08;
}

.q-package-icon {
  font-size: 1.5rem;
  color: var(--color-gold);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold-muted);
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.q-package-card.selected .q-package-icon {
  background: var(--color-gold);
  color: #fff;
}

.q-package-name {
  font-weight: var(--fw-semibold);
  font-size: var(--type-sm);
  color: var(--text-primary);
}

.q-package-price {
  font-size: var(--type-xs);
  color: var(--text-muted);
}

.q-package-card.selected .q-package-name {
  color: var(--color-gold-dark);
}

/* ======================================================================
   HOUR COUNTER
   ====================================================================== */

.q-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: #fff;
  border: 1.5px solid var(--color-beige);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
}

.q-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-beige);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--type-xs);
}

.q-counter-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.q-counter-value {
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  min-width: 28px;
  text-align: center;
}

.q-counter-label {
  font-size: var(--type-sm);
  color: var(--text-muted);
}

/* ======================================================================
   ADD-ON CHECKBOXES
   ====================================================================== */

.q-addon-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.q-addon-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #fff;
  border: 1.5px solid var(--color-beige);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.q-addon-check:hover {
  border-color: var(--color-gold-light);
}

.q-addon-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.q-addon-check-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-beige);
  color: transparent;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  font-size: var(--type-xs);
}

.q-addon-check input:checked ~ .q-addon-check-box {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}

.q-addon-check input:checked ~ .q-addon-check-info strong {
  color: var(--color-gold-dark);
}

.q-addon-check:has(input:checked) {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-muted);
}

.q-addon-check-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.q-addon-check-info strong {
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: color var(--transition-fast);
}

.q-addon-check-info span {
  font-size: var(--type-xs);
  color: var(--text-muted);
}

/* ======================================================================
   NAVIGATION (prev/next buttons)
   ====================================================================== */

.q-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-sand);
}

.q-btn-prev {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}

.q-btn-prev:hover {
  color: var(--text-primary);
  background: var(--color-sand);
}

.q-btn-next,
.q-btn-submit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.875rem 2rem;
  font-size: var(--type-sm);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.q-btn-next i,
.q-btn-submit i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.q-btn-next:hover i,
.q-btn-submit:hover i {
  transform: translateX(3px);
}

.q-btn-submit {
  padding: 1rem 2.5rem;
  font-size: var(--type-base);
}

/* ======================================================================
   SUCCESS STATE
   ====================================================================== */

.q-success-inner {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  animation: qPanelIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.q-success-icon {
  font-size: 4rem;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
}

.q-success-icon i {
  animation: qSuccessPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s both;
}

@keyframes qSuccessPop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.q-success-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--type-3xl), 4vw, var(--type-5xl));
  font-style: italic;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.q-success-inner p {
  max-width: 480px;
  margin: 0 auto var(--space-8);
  font-size: var(--type-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */

@media (max-width: 640px) {
  .q-hero {
    padding-top: calc(var(--nav-height) + var(--space-12));
    padding-bottom: var(--space-8);
  }

  .q-hero h1 {
    font-size: var(--type-4xl);
  }

  .q-section {
    padding: var(--space-8) 0 var(--space-16);
  }

  .q-steps {
    gap: var(--space-1);
    margin-bottom: var(--space-8);
  }

  .q-step {
    padding: var(--space-1) var(--space-2);
  }

  .q-step-number {
    width: 32px;
    height: 32px;
    font-size: var(--type-sm);
  }

  .q-panel-header h2 {
    font-size: var(--type-3xl);
  }

  .q-package-cards {
    grid-template-columns: 1fr;
  }

  .q-package-card {
    flex-direction: row;
    text-align: left;
    padding: var(--space-4);
  }

  .q-package-icon {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }

  .q-btn-next,
  .q-btn-submit {
    padding: 0.75rem 1.5rem;
  }

  .q-nav {
    margin-top: var(--space-8);
  }
}

/* Bottom padding for mobile bottom nav */
@media (max-width: 1023px) {
  .q-section {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-12));
  }
}