/**
 * Booking wizard — Step 1 (Dates + property facts). TASK-36 / STORY 8.
 * Token-based re-skin of the existing step-1 markup. The image gallery,
 * the calendar engine (booking-calendar.js), the property facts JS, and
 * the sidebar booking form (#bookingForm) are intentionally untouched.
 *
 * TASK-46 (2026-05-23): the legacy #hiddenBookingForm duplicate was
 * removed; #bookingForm in compact_booking_sidebar_simple.html is now the
 * sole submission target on step 1.
 */

.bk-step { padding-block: var(--space-6) var(--space-12); }

.bk-step__intro {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Replaces the legacy .initially-hidden class used in step-1 markup but
   never declared in any stylesheet. */
.initially-hidden { display: none; }

/* ==========================================================================
   Section cards (shared shape with step 2/3)
   ========================================================================== */
.compact-section {
  background-color: var(--surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.compact-section-title,
.compact-section-subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.compact-section-title { font-size: var(--font-size-xl); }
.compact-section-subtitle { font-size: var(--font-size-lg); }
.compact-section-title i,
.compact-section-subtitle i { color: var(--color-accent-dark); font-size: 0.85em; }
[data-theme="dark"] .compact-section-title i,
[data-theme="dark"] .compact-section-subtitle i { color: var(--color-accent); }

.property-description {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Messages + alerts + deactivation banner
   ========================================================================== */
.booking-messages-container {
  margin-bottom: var(--space-5);
}

.booking-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-info);
  border-radius: var(--radius-lg);
  background-color: var(--color-info-soft);
  color: var(--color-info-strong);
}
.booking-alert + .booking-alert { margin-top: var(--space-3); }
.booking-alert i { font-size: var(--font-size-base); margin-top: 2px; }

.booking-alert-error {
  background-color: var(--color-danger-soft);
  border-color: var(--color-danger);
  border-left-color: var(--color-danger);
  color: var(--color-danger-strong);
}
.booking-alert-success {
  background-color: var(--color-success-soft);
  border-color: var(--color-success);
  border-left-color: var(--color-success);
  color: var(--color-success-strong);
}
.booking-alert--warning {
  background-color: var(--color-warning-soft);
  border-color: var(--color-warning);
  border-left-color: var(--color-warning);
  color: var(--color-warning-strong);
}

/* Icon utility — replaces an inline style on the deactivation icon. */
.bk-warning-icon { color: var(--color-warning); }

/* ==========================================================================
   Form-error summary block (#form-errors-container)
   ========================================================================== */
.form-errors-container {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background-color: var(--color-danger-soft);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-lg);
}
.form-errors-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-strong);
}
.form-errors-field {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.form-errors-item {
  margin-left: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-danger-strong);
}

/* ==========================================================================
   Form controls inside step 1 (calendar-trigger inputs, guest counter)
   ========================================================================== */
.step1-container .form-input,
.step1-container input[type="text"],
.step1-container input[type="email"],
.step1-container input[type="tel"],
.step1-container input[type="number"],
.step1-container input[type="date"],
.step1-container select,
.step1-container textarea {
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--surface-base);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.step1-container input:focus,
.step1-container select:focus,
.step1-container textarea:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.step1-container .form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Sidebar continue area (mirrors step 2/3)
   ========================================================================== */
.bk-aside-actions {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bk-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
}
.bk-back-link:hover { color: var(--color-text-primary); }
.bk-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

@media (max-width: 1023px) {
  .bk-aside-actions { display: none; }
}