/* ==========================================================================
   Add Reservation App - Complete CSS Architecture
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/*
   1. CSS Variables & Global Reset
   2. App Namespace (.add-reservation-app)
   3. Shared Components
   4. Page-Specific Styles
      - Contact Picker Page
      - Upload Invoice Page
      - Agent Selection Modal
      - Edit Contact Page
      - Add Contact Page
      - Passengers Page
      - Vendor Select Page (coming soon)
      - Cruise Detail Page (coming soon)
      - Land Detail Page (coming soon)
      - Pricing Page (coming soon)
      - Amenities Page (coming soon)
      - Payments Page (coming soon)
      - Confirmation Page (coming soon)
      - Done Page (coming soon)
*/

/* ==========================================================================
   1. CSS Variables & Global Reset
   ========================================================================== */
:root {
  /* Colors */
  --ar-primary-color: var(--cbat-primary, #5a9fd4);
  --ar-secondary-color: var(--success, #28a745);
  --ar-error-color: var(--error, #dc3545);
  --ar-error-light: #f8d7da; /* ci-exempt - Bootstrap danger tint, no direct CBAT variable */
  --ar-warning-color: var(--warning, #ffc107);
  --ar-success-color: var(--success, #28a745);
  --ar-success-light: #d1f2db; /* ci-exempt - success light tint, no direct CBAT variable */
  --ar-success-bg: #e8f5e9; /* ci-exempt - success bg tint, no direct CBAT variable */
  --ar-text-primary: var(--cbat-text, #333);
  --ar-text-secondary: var(--cbat-text-muted, #666);
  --ar-text-tertiary: #999; /* ci-exempt - tertiary text, no direct CBAT variable */
  --ar-bg: var(--cbat-bg, #ffffff);
  --ar-border-color: var(--cbat-border, #e0e0e0);
  --ar-border-light: var(--cbat-border-light, #f0f0f0);
  --ar-background-light: var(--cbat-bg-secondary, #f8f9fa);
  
  /* Typography */
  --ar-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ar-font-size-base: 16px;
  --ar-font-size-small: 0.9rem;
  --ar-font-size-large: 1.1rem;
  
  /* Spacing */
  --ar-spacing-xs: 0.25rem;
  --ar-spacing-sm: 0.5rem;
  --ar-spacing-md: 1rem;
  --ar-spacing-lg: 1.5rem;
  --ar-spacing-xl: 2rem;
  
  /* Border Radius */
  --ar-radius-sm: 4px;
  --ar-radius-md: 6px;
  --ar-radius-lg: 8px;
  
  /* Transitions */
  --ar-transition-fast: 150ms ease-in-out;
  --ar-transition-normal: 250ms ease-in-out;
}

/* ==========================================================================
   2. App Namespace
   ========================================================================== */
.add-reservation-app {
  font-family: var(--ar-font-family);
  font-size: var(--ar-font-size-base);
  color: var(--ar-text-primary);
  line-height: 1.5;
  
  /* Reset box-sizing for all elements within the app */
  *, *::before, *::after {
    box-sizing: border-box;
  }
}

/* ==========================================================================
   3. Shared Components & Utilities
   ========================================================================== */

/* ========================================
   Utility Classes
   ======================================== */

/* Text utilities */
.add-reservation-app .ar-text-center { align-items: center; }
.add-reservation-app .ar-text-left { text-align: left; }
.add-reservation-app .ar-text-right { text-align: right; }
.add-reservation-app .ar-text-small { font-size: var(--ar-font-size-small); }
.add-reservation-app .ar-text-large { font-size: var(--ar-font-size-large); }
.add-reservation-app .ar-text-muted { color: var(--ar-text-secondary); }
.add-reservation-app .ar-text-error { color: var(--ar-error-color); }
.add-reservation-app .ar-text-success { color: var(--ar-success-color); }
.add-reservation-app .ar-font-bold { font-weight: 600; }

/* Spacing utilities */
.add-reservation-app .ar-mt-xs { margin-top: var(--ar-spacing-xs); }
.add-reservation-app .ar-mt-sm { margin-top: var(--ar-spacing-sm); }
.add-reservation-app .ar-mt-md { margin-top: var(--ar-spacing-md); }
.add-reservation-app .ar-mt-lg { margin-top: var(--ar-spacing-lg); }
.add-reservation-app .ar-mt-xl { margin-top: var(--ar-spacing-xl); }

.add-reservation-app .ar-mb-xs { margin-bottom: var(--ar-spacing-xs); }
.add-reservation-app .ar-mb-sm { margin-bottom: var(--ar-spacing-sm); }
.add-reservation-app .ar-mb-md { margin-bottom: var(--ar-spacing-md); }
.add-reservation-app .ar-mb-lg { margin-bottom: var(--ar-spacing-lg); }
.add-reservation-app .ar-mb-xl { margin-bottom: var(--ar-spacing-xl); }

.add-reservation-app .ar-p-xs { padding: var(--ar-spacing-xs); }
.add-reservation-app .ar-p-sm { padding: var(--ar-spacing-sm); }
.add-reservation-app .ar-p-md { padding: var(--ar-spacing-md); }
.add-reservation-app .ar-p-lg { padding: var(--ar-spacing-lg); }
.add-reservation-app .ar-p-xl { padding: var(--ar-spacing-xl); }

/* Display utilities */
.add-reservation-app .ar-d-none { display: none; }
.add-reservation-app .ar-d-block { display: block; }
.add-reservation-app .ar-d-flex { display: flex; }
.add-reservation-app .ar-d-inline-flex { display: inline-flex; }

/* Flex utilities */
.add-reservation-app .ar-flex-center { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.add-reservation-app .ar-flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-reservation-app .ar-flex-column { flex-direction: column; }
.add-reservation-app .ar-flex-1 { flex: 1; }
.add-reservation-app .ar-gap-xs { gap: var(--ar-spacing-xs); }
.add-reservation-app .ar-gap-sm { gap: var(--ar-spacing-sm); }
.add-reservation-app .ar-gap-md { gap: var(--ar-spacing-md); }
.add-reservation-app .ar-gap-lg { gap: var(--ar-spacing-lg); }

/* Width utilities */
.add-reservation-app .ar-w-100 { width: 100%; }
.add-reservation-app .ar-max-w-sm { max-width: 400px; }
.add-reservation-app .ar-max-w-md { max-width: 600px; }
.add-reservation-app .ar-max-w-lg { max-width: 800px; }
.add-reservation-app .ar-max-w-xl { max-width: 1200px; }

/* Border utilities */
.add-reservation-app .ar-border { border: 1px solid var(--ar-border-color); }
.add-reservation-app .ar-border-top { border-top: 1px solid var(--ar-border-color); }
.add-reservation-app .ar-border-bottom { border-bottom: 1px solid var(--ar-border-color); }
.add-reservation-app .ar-border-radius { border-radius: var(--ar-radius-sm); }

/* Background utilities */
.add-reservation-app .ar-bg-light { background-color: var(--ar-background-light); }
.add-reservation-app .ar-bg-white { background-color: var(--ar-bg); }
.add-reservation-app .ar-bg-success { background-color: var(--ar-success-bg); }
.add-reservation-app .ar-bg-error { background-color: var(--ar-error-light); }

/* Shadow utilities */
.add-reservation-app .ar-shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); }
.add-reservation-app .ar-shadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.add-reservation-app .ar-shadow-lg { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); }

/* ========================================
   Common Page Elements - Consolidated
   ======================================== */

/* Page titles - base style for all pages */
.add-reservation-app .ar-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  align-items: center;
  margin-bottom: var(--ar-spacing-xl);
  line-height: 1.3;
}

/* Page subtitles */
.add-reservation-app .ar-page-subtitle {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-base);
  align-items: center;
  margin-bottom: var(--ar-spacing-lg);
  line-height: 1.5;
}

/* Common page container */
.add-reservation-app .ar-page-container {
  padding: var(--ar-spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

/* Common section styles */
.add-reservation-app .ar-section {
  margin-bottom: var(--ar-spacing-xl);
  padding: var(--ar-spacing-xl);
  background-color: var(--ar-bg);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   3. Shared Components
   ========================================================================== */

/* ========================================
   Form Elements - Consolidated
   ======================================== */

/* Base input/form control class */
.add-reservation-app .ar-input,
.add-reservation-app .ar-form-control,
.add-reservation-app .ar-search-input,
/* Group picker reuses the shared flexible-autocomplete, whose own width style
   is commented out; borrow the ar-input look so it matches its siblings and
   fills the field. Scoped to #group-select so no other autocomplete changes. */
.add-reservation-app #group-select .autocomplete-query-input {
  /* Box Model */
  width: 100%;
  padding: var(--ar-spacing-sm) var(--ar-spacing-md);
  
  /* Typography */
  font-family: inherit;
  font-size: var(--ar-font-size-base);
  line-height: 1.5;
  color: var(--ar-text-primary);
  
  /* Visual */
  background-color: var(--ar-bg);
  border: 1px solid var(--ar-border-color);
  border-radius: var(--ar-radius-sm);
  
  /* Interaction */
  transition: all var(--ar-transition-fast);
}

/* Focus state for all inputs */
.add-reservation-app .ar-input:focus,
.add-reservation-app .ar-form-control:focus,
.add-reservation-app .ar-search-input:focus,
.add-reservation-app #group-select .autocomplete-query-input:focus {
  outline: 2px solid var(--ar-primary-color);
  outline-offset: 2px;
  border-color: var(--ar-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25);
}

/* Input state modifiers */
.add-reservation-app .ar-input.ar-error,
.add-reservation-app .ar-form-control.ar-error {
  border-color: var(--ar-error-color);
  border-width: 2px; /* Thicker border for better visibility */
}

.add-reservation-app .ar-input.ar-error:focus,
.add-reservation-app .ar-form-control.ar-error:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.add-reservation-app .ar-input.ar-valid,
.add-reservation-app .ar-form-control.ar-valid {
  border-color: var(--ar-secondary-color);
}

.add-reservation-app .ar-input.ar-warning,
.add-reservation-app .ar-form-control.ar-warning {
  border-color: var(--ar-warning-color);
}

/* Placeholder styling */
.add-reservation-app .ar-input::placeholder,
.add-reservation-app .ar-form-control::placeholder,
.add-reservation-app .ar-search-input::placeholder {
  color: var(--ar-text-tertiary);
  opacity: 0.7;
}

/* Textarea specific */
.add-reservation-app textarea.ar-input,
.add-reservation-app textarea.ar-form-control {
  min-height: 100px;
  resize: vertical;
}

/* Select specific */
.add-reservation-app select.ar-input,
.add-reservation-app select.ar-form-control {
  cursor: pointer;
}

/* Search input modifier */
.add-reservation-app .ar-search-input {
  padding-right: 40px; /* Space for search icon */
}

/* Form group wrapper */
.add-reservation-app .ar-form-group {
  margin-bottom: var(--ar-spacing-lg);
}

/* Form labels */
.add-reservation-app .ar-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--ar-spacing-xs);
  color: var(--ar-text-primary);
}

/* Form help text */
.add-reservation-app .ar-help-text {
  display: block;
  font-size: var(--ar-font-size-small);
  color: var(--ar-text-secondary);
  margin-top: var(--ar-spacing-xs);
  line-height: 1.4;
}

/* Error text */
.add-reservation-app .ar-error-text {
  display: block;
  font-size: var(--ar-font-size-small);
  color: var(--ar-error-color);
  margin-top: var(--ar-spacing-xs);
  line-height: 1.4;
}

/* Add visual indicator to error messages for better accessibility */
.add-reservation-app .ar-error-text::before {
  content: "⚠️ ";
  margin-right: 0.25rem;
  speak: none; /* Don't read the emoji to screen readers */
}

/* Also add icon to notification-style errors */
.add-reservation-app .ar-notification::before {
  content: "⚠️ ";
  margin-right: 0.25rem;
  speak: none; /* Don't read the emoji to screen readers */
}

/* ========================================
   Button Base & Variants - Consolidated
   ======================================== */

/* Base button class - all buttons extend this */
.add-reservation-app .ar-button {
  /* Display & Box Model */
  display: inline-block;
  padding: var(--ar-spacing-sm) var(--ar-spacing-lg);
  min-width: 120px;
  
  /* Typography */
  font-family: inherit;
  font-size: var(--ar-font-size-base);
  font-weight: 400;
  line-height: 1.5;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  
  /* Visual */
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--ar-radius-sm);
  
  /* Interaction */
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  transition: all var(--ar-transition-fast);
}

/* Button hover base */
.add-reservation-app .ar-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button disabled state */
.add-reservation-app .ar-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Enhanced focus state for all buttons */
.add-reservation-app .ar-button:focus {
  outline: 2px solid var(--ar-primary-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25);
}

/* Primary variant */
.add-reservation-app .ar-button-primary {
  color: white;
  background-color: var(--ar-primary-color);
  border-color: var(--ar-primary-color);
}

.add-reservation-app .ar-button-primary:hover:not(:disabled) {
  background-color: var(--cbat-primary-dark);
  border-color: var(--cbat-primary-dark);
}

/* Secondary variant */
.add-reservation-app .ar-button-secondary {
  color: var(--ar-text-primary);
  background-color: var(--ar-bg);
  border-color: var(--ar-border-color);
}

.add-reservation-app .ar-button-secondary:hover:not(:disabled) {
  background-color: var(--ar-background-light);
  border-color: var(--ar-text-secondary);
}

/* Save/Success variant */
.add-reservation-app .ar-button-save {
  color: white;
  background-color: var(--ar-secondary-color);
  border-color: var(--ar-secondary-color);
}

.add-reservation-app .ar-button-save:hover:not(:disabled) {
  background-color: var(--success-dark);
  border-color: var(--success-dark);
}

/* Error/Danger variant */
.add-reservation-app .ar-button-error {
  color: white;
  background-color: var(--ar-error-color);
  border-color: var(--ar-error-color);
}

.add-reservation-app .ar-button-error:hover:not(:disabled) {
  background-color: var(--error-dark);
  border-color: var(--error-dark);
}

/* Ghost variant */
.add-reservation-app .ar-button-ghost {
  color: var(--ar-text-secondary);
  background-color: transparent;
  border-color: var(--ar-border-color);
}

.add-reservation-app .ar-button-ghost:hover:not(:disabled) {
  color: var(--ar-text-primary);
  border-color: var(--ar-text-primary);
  background-color: var(--ar-background-light);
}

/* Size modifiers */
.add-reservation-app .ar-button-sm {
  padding: var(--ar-spacing-xs) var(--ar-spacing-md);
  font-size: var(--ar-font-size-small);
  min-width: 80px;
}

.add-reservation-app .ar-button-lg {
  padding: var(--ar-spacing-md) var(--ar-spacing-xl);
  font-size: var(--ar-font-size-large);
  min-width: 160px;
}

/* Full width modifier */
.add-reservation-app .ar-button-block {
  display: block;
  width: 100%;
}

/* Icon support */
.add-reservation-app .ar-button i {
  margin-right: var(--ar-spacing-xs);
  transition: transform var(--ar-transition-fast);
}

.add-reservation-app .ar-button:hover:not(:disabled) i {
  transform: scale(1.05);
}

/* ==========================================================================
   4. Page-Specific Styles - Contact Picker Page
   ========================================================================== */
.add-reservation-app .contact-picker-page {
  /* Page container */
  padding: var(--ar-spacing-lg);
  max-width: 1200px;
  margin: 0 auto;
}

/* Change Agent Link */
.add-reservation-app .contact-picker-page .ar-change-agent-link {
  display: inline-block;
  color: var(--ar-primary-color);
  text-decoration: none;
  font-size: var(--ar-font-size-small);
  margin-bottom: var(--ar-spacing-md);
  transition: color var(--ar-transition-fast);
}

.add-reservation-app .contact-picker-page .ar-change-agent-link:hover {
  color: var(--cbat-primary-dark);
  text-decoration: underline;
}

/* Page titles and subtitles */
.add-reservation-app .contact-picker-page .ar-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  align-items: center;
  margin-bottom: var(--ar-spacing-sm);
}

.add-reservation-app .contact-picker-page .ar-page-subtitle {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-base);
  margin-top: 0;
  margin-bottom: var(--ar-spacing-xl);
  align-items: center;
}

/* Search section */
.add-reservation-app .contact-picker-page .ar-search-section {
  margin-bottom: var(--ar-spacing-xl);
  padding: var(--ar-spacing-xl);
  background-color: var(--ar-background-light);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.add-reservation-app .contact-picker-page .ar-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: var(--ar-spacing-sm);
  color: var(--ar-text-primary);
  align-items: center;
}

.add-reservation-app .contact-picker-page .ar-search-hint {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-small);
  margin-bottom: var(--ar-spacing-lg);
  align-items: center;
}

/* Search controls */
.add-reservation-app .contact-picker-page .ar-search-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ar-spacing-sm);
  margin-top: var(--ar-spacing-sm);
}

.add-reservation-app .contact-picker-page .ar-search-input {
  flex: 1;
  max-width: 400px;
  /* Inherits base input styles */
}

/* Selected contact actions */
.add-reservation-app .contact-picker-page .ar-selected-actions {
  align-items: center;
  padding: var(--ar-spacing-xl);
  background-color: var(--ar-background-light);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: var(--ar-spacing-xl);
}

.add-reservation-app .contact-picker-page .ar-action-prompt {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: var(--ar-spacing-xl);
  color: var(--ar-text-primary);
}

.add-reservation-app .contact-picker-page .ar-action-buttons {
  margin: var(--ar-spacing-lg) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ar-spacing-md);
}

.add-reservation-app .contact-picker-page .ar-action-buttons .ar-button {
  min-width: 120px;
}

.add-reservation-app .contact-picker-page .ar-action-text {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-base);
}

.add-reservation-app .contact-picker-page .ar-action-divider {
  position: relative;
  margin: var(--ar-spacing-xl) 0;
  padding: var(--ar-spacing-sm) var(--ar-spacing-md);
  font-weight: 600;
  font-size: var(--ar-font-size-small);
  color: var(--ar-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Center "OR" between the ::before/::after lines (the <p> is left-aligned
     by default, so it otherwise sits at the left edge). */
  text-align: center;
}

.add-reservation-app .contact-picker-page .ar-action-divider::before,
.add-reservation-app .contact-picker-page .ar-action-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 40px);
  height: 1px;
  background-color: var(--ar-border-color);
}

.add-reservation-app .contact-picker-page .ar-action-divider::before {
  left: 0;
}

.add-reservation-app .contact-picker-page .ar-action-divider::after {
  right: 0;
}

/* Continue button gets special emphasis */
.add-reservation-app .contact-picker-page .ar-button-save {
  font-size: var(--ar-font-size-large);
  padding: var(--ar-spacing-md) var(--ar-spacing-xl);
  min-width: 160px;
}

/* Search results */
.add-reservation-app .contact-picker-page .ar-search-results {
  margin-top: var(--ar-spacing-xl);
  padding: var(--ar-spacing-xl);
  background-color: var(--ar-bg);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Loading state */
.add-reservation-app .contact-picker-page .ar-loading {
  align-items: center;
  padding: var(--ar-spacing-xl);
}

.add-reservation-app .contact-picker-page .ar-loading h4 {
  color: var(--ar-primary-color);
  margin-bottom: var(--ar-spacing-sm);
}

.add-reservation-app .contact-picker-page .ar-loading p {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-small);
}

/* Results table */
.add-reservation-app .contact-picker-page .ar-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--ar-spacing-lg);
  border: none !important;
  overflow: hidden;
  border-radius: var(--ar-radius-md);
}

.add-reservation-app .contact-picker-page .ar-results-table * {
  border: none !important;
}

.add-reservation-app .contact-picker-page .ar-results-table thead {
  background-color: var(--ar-background-light);
}

.add-reservation-app .contact-picker-page .ar-results-table tr {
  border: none !important;
}

.add-reservation-app .contact-picker-page .ar-results-table th {
  padding: var(--ar-spacing-md);
  text-align: left;
  font-weight: 600;
  color: var(--ar-text-primary);
  border: none !important;
  border-bottom: 2px solid var(--ar-border-color) !important;
}

.add-reservation-app .contact-picker-page .ar-results-table td {
  padding: var(--ar-spacing-md);
  border: none !important;
  border-bottom: 1px solid var(--ar-border-color) !important;
}

.add-reservation-app .contact-picker-page .ar-results-table tbody tr {
  cursor: pointer;
  transition: background-color var(--ar-transition-fast);
}

.add-reservation-app .contact-picker-page .ar-results-table tbody tr:hover {
  background-color: var(--ar-background-light);
}

/* Status indicators */
.add-reservation-app .contact-picker-page .ar-status-complete {
  color: var(--ar-secondary-color);
  font-weight: 500;
}

.add-reservation-app .contact-picker-page .ar-status-incomplete {
  color: var(--ar-error-color);
  font-weight: 500;
}

/* No results */
.add-reservation-app .contact-picker-page .ar-no-results {
  align-items: center;
  padding: var(--ar-spacing-xl) 0;
  color: var(--ar-text-secondary);
}

/* Add contact section */
.add-reservation-app .contact-picker-page .ar-add-contact-section {
  margin-top: var(--ar-spacing-xl);
  align-items: center;
  padding-top: var(--ar-spacing-xl);
}

.add-reservation-app .contact-picker-page .ar-add-contact-section p {
  margin: 0;
}

.add-reservation-app .contact-picker-page .ar-add-contact-section span {
  margin-right: var(--ar-spacing-sm);
}

/* Warning message */
.add-reservation-app .contact-picker-page .ar-warning-message {
  color: var(--ar-error-color);
  font-size: var(--ar-font-size-base);
  margin-top: var(--ar-spacing-lg);
  padding: var(--ar-spacing-md);
  background-color: var(--error-bg);
  border-radius: var(--ar-radius-sm);
  border: 1px solid color-mix(in srgb, var(--error) 20%, var(--cbat-bg));
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .add-reservation-app .contact-picker-page .ar-page-title {
    font-size: 1.25rem;
  }
  
  .add-reservation-app .contact-picker-page .ar-search-controls {
    flex-direction: column;
    width: 100%;
  }
  
  .add-reservation-app .contact-picker-page .ar-search-input {
    max-width: 100%;
  }
  
  .add-reservation-app .contact-picker-page .ar-button {
    width: 100%;
  }
  
  .add-reservation-app .contact-picker-page .ar-action-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .add-reservation-app .contact-picker-page .ar-action-text {
    display: block;
    margin-top: var(--ar-spacing-xs);
  }
  
  /* Responsive table */
  .add-reservation-app .contact-picker-page .ar-results-table thead {
    display: none;
  }
  
  .add-reservation-app .contact-picker-page .ar-results-table tr {
    display: block;
    margin-bottom: var(--ar-spacing-md);
    border: 1px solid var(--ar-border-color);
    border-radius: var(--ar-radius-sm);
  }
  
  .add-reservation-app .contact-picker-page .ar-results-table td {
    display: block;
    text-align: right;
    padding: var(--ar-spacing-sm) var(--ar-spacing-md);
    border-bottom: 1px solid var(--ar-border-color);
  }
  
  .add-reservation-app .contact-picker-page .ar-results-table td:last-child {
    border-bottom: none;
  }
  
  .add-reservation-app .contact-picker-page .ar-results-table td::before {
    content: attr(data-title);
    float: left;
    font-weight: 600;
  }
}

/* Vue transition classes (shared across pages) */
/* drop-in transition */
.add-reservation-app .drop-in-enter-active {
  transition: all 0.5s ease-out;
}

.add-reservation-app .drop-in-leave-active {
  transition: all 0.3s ease-in;
}

.add-reservation-app .drop-in-enter-from {
  transform: translateY(-30px);
  opacity: 0;
}

.add-reservation-app .drop-in-leave-to {
  transform: translateY(30px);
  opacity: 0;
}

/* roll-out transition */
.add-reservation-app .roll-out-enter-active {
  transition: all 0.3s ease-out;
}

.add-reservation-app .roll-out-leave-active {
  transition: all 0.3s ease-in;
}

.add-reservation-app .roll-out-enter-from {
  transform: translateY(30px);
  opacity: 0;
}

.add-reservation-app .roll-out-leave-to {
  transform: translateY(-30px);
  opacity: 0;
}

/* slide-up transition */
.add-reservation-app .slide-up-enter-active {
  transition: all 0.3s ease-out;
}

.add-reservation-app .slide-up-leave-active {
  transition: all 0.3s ease-in;
}

.add-reservation-app .slide-up-enter-from {
  transform: translateY(100%);
  opacity: 0;
}

.add-reservation-app .slide-up-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

/* ========================================
   Modal Base Styles - Consolidated
   ======================================== */

/* Base modal overlay */
.add-reservation-app .ar-modal,
.add-reservation-app .ar-agent-modal,
.add-reservation-app .ar-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--ar-spacing-lg);
}

/* Base modal content */
.add-reservation-app .ar-modal .ar-modal-content,
.add-reservation-app .ar-agent-modal .ar-modal-content,
.add-reservation-app .ar-confirm-modal .ar-modal-content {
  background-color: var(--ar-bg);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* Modal sections */
.add-reservation-app .ar-modal-header {
  padding: var(--ar-spacing-lg);
  border-bottom: 1px solid var(--ar-border-color);
  position: relative;
}

.add-reservation-app .ar-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  margin: 0;
}

.add-reservation-app .ar-modal-body {
  padding: var(--ar-spacing-lg);
  flex: 1;
  overflow-y: auto;
}

.add-reservation-app .ar-modal-footer {
  padding: var(--ar-spacing-lg);
  border-top: 1px solid var(--ar-border-color);
  display: flex;
  justify-content: center;
  gap: var(--ar-spacing-md);
}

/* Modal close button */
.add-reservation-app .ar-modal-close {
  position: absolute;
  top: var(--ar-spacing-md);
  right: var(--ar-spacing-md);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--ar-text-secondary);
  cursor: pointer;
  padding: var(--ar-spacing-xs);
  line-height: 1;
  transition: color var(--ar-transition-fast);
}

.add-reservation-app .ar-modal-close:hover {
  color: var(--ar-text-primary);
}

/* ==========================================================================
   4. Page-Specific Styles - Upload Invoice Page
   ========================================================================== */
.add-reservation-app .ar-upload-invoice-page {
  padding: var(--ar-spacing-lg);
  max-width: 600px;
  margin: 0 auto;
}

.add-reservation-app .ar-upload-invoice-page .ar-upload-container {
  background-color: var(--ar-background-light);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: var(--ar-spacing-xl);
  align-items: center;
}

.add-reservation-app .ar-upload-invoice-page .ar-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  margin-bottom: var(--ar-spacing-sm);
}

.add-reservation-app .ar-upload-invoice-page .ar-page-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ar-primary-color);
  margin-bottom: var(--ar-spacing-md);
}

.add-reservation-app .ar-upload-invoice-page .ar-info-text {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-base);
  margin-bottom: var(--ar-spacing-lg);
  line-height: 1.6;
}

.add-reservation-app .ar-upload-invoice-page .ar-vendor-list {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-base);
  margin-bottom: var(--ar-spacing-xl);
  line-height: 1.8;
}

/* Upload Form */
.add-reservation-app .ar-upload-invoice-page .ar-upload-form {
  margin-bottom: var(--ar-spacing-lg);
}

.add-reservation-app .ar-upload-invoice-page .ar-form-group {
  text-align: left; /* Inherits margin-bottom from base .ar-form-group */
}

.add-reservation-app .ar-upload-invoice-page .ar-label {
  display: block;
  font-weight: 500;
  color: var(--ar-text-primary);
  margin-bottom: var(--ar-spacing-sm);
  font-size: var(--ar-font-size-base);
}

.add-reservation-app .ar-upload-invoice-page .ar-file-input {
  width: 100%;
  padding: var(--ar-spacing-sm);
  border: 2px dashed var(--ar-border-color);
  border-radius: var(--ar-radius-md);
  background-color: var(--ar-bg);
  font-size: var(--ar-font-size-base);
  transition: all var(--ar-transition-fast);
  cursor: pointer;
}

.add-reservation-app .ar-upload-invoice-page .ar-file-input:hover {
  border-color: var(--ar-primary-color);
  background-color: color-mix(in srgb, var(--cbat-primary) 5%, var(--cbat-bg));
}

.add-reservation-app .ar-upload-invoice-page .ar-file-input:focus {
  outline: none;
  border-color: var(--ar-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25);
}

/* Divider */
.add-reservation-app .ar-upload-invoice-page .ar-divider {
  position: relative;
  margin: var(--ar-spacing-xl) 0;
  align-items: center;
  /* Center the "OR" between the ::before/::after lines (the box itself
     inherits the card's left alignment otherwise). */
  text-align: center;
}

/* Center the Skip button (its own bare <form>) to match the centered
   Submit/Express button group above the divider. */
.add-reservation-app .ar-upload-invoice-page form:not(.ar-upload-form) {
  text-align: center;
}

.add-reservation-app .ar-upload-invoice-page .ar-divider::before,
.add-reservation-app .ar-upload-invoice-page .ar-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 40px);
  height: 1px;
  background-color: var(--ar-border-color);
}

.add-reservation-app .ar-upload-invoice-page .ar-divider::before {
  left: 0;
}

.add-reservation-app .ar-upload-invoice-page .ar-divider::after {
  right: 0;
}

.add-reservation-app .ar-upload-invoice-page .ar-divider-text {
  display: inline-block;
  padding: 0 var(--ar-spacing-md);
  background-color: var(--ar-background-light);
  color: var(--ar-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--ar-font-size-small);
  letter-spacing: 0.05em;
}

/* Message display */
.add-reservation-app .ar-upload-invoice-page .ar-message {
  padding: var(--ar-spacing-md);
  margin-bottom: var(--ar-spacing-lg);
  border-radius: var(--ar-radius-sm);
  font-size: var(--ar-font-size-base);
}

.add-reservation-app .ar-upload-invoice-page .ar-message-error {
  background-color: var(--error-bg);
  color: var(--ar-error-color);
  border: 1px solid color-mix(in srgb, var(--error) 20%, var(--cbat-bg));
}

.add-reservation-app .ar-upload-invoice-page .ar-message-success {
  background-color: var(--success-bg);
  color: var(--ar-secondary-color);
  border: 1px solid color-mix(in srgb, var(--success) 20%, var(--cbat-bg));
}

/* Responsive */
@media (max-width: 768px) {
  .add-reservation-app .ar-upload-invoice-page {
    padding: var(--ar-spacing-md);
  }
  
  .add-reservation-app .ar-upload-invoice-page .ar-upload-container {
    padding: var(--ar-spacing-lg);
  }
  
  .add-reservation-app .ar-upload-invoice-page .ar-page-title {
    font-size: 1.5rem;
  }
  
  .add-reservation-app .ar-upload-invoice-page .ar-page-subtitle {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   4. Page-Specific Styles - Agent Selection Modal
   ========================================================================== */
.add-reservation-app .ar-agent-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--ar-spacing-lg);
}

.add-reservation-app .ar-agent-modal .ar-modal-content {
  background-color: var(--ar-bg);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.add-reservation-app .ar-agent-modal .ar-modal-header {
  padding: var(--ar-spacing-lg);
  border-bottom: 1px solid var(--ar-border-color);
  position: relative;
}

.add-reservation-app .ar-agent-modal .ar-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  margin: 0;
}

.add-reservation-app .ar-agent-modal .ar-modal-close {
  position: absolute;
  top: var(--ar-spacing-lg);
  right: var(--ar-spacing-lg);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--ar-text-secondary);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ar-radius-sm);
  transition: all var(--ar-transition-fast);
}

.add-reservation-app .ar-agent-modal .ar-modal-close:hover {
  background-color: var(--ar-background-light);
  color: var(--ar-text-primary);
}

.add-reservation-app .ar-agent-modal .ar-modal-body {
  padding: var(--ar-spacing-xl);
}

/* Form group inherits base styles */

.add-reservation-app .ar-agent-modal .ar-label {
  display: block;
  font-weight: 500;
  color: var(--ar-text-primary);
  margin-bottom: var(--ar-spacing-sm);
  font-size: var(--ar-font-size-base);
}

.add-reservation-app .ar-agent-modal .ar-select {
  width: 100%;
  padding: var(--ar-spacing-sm) var(--ar-spacing-md);
  font-size: var(--ar-font-size-base);
  line-height: 1.5;
  color: var(--ar-text-primary);
  background-color: var(--ar-bg);
  border: 1px solid var(--ar-border-color);
  border-radius: var(--ar-radius-sm);
  transition: border-color var(--ar-transition-fast);
  cursor: pointer;
}

.add-reservation-app .ar-agent-modal .ar-select:focus {
  outline: none;
  border-color: var(--ar-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25);
}

.add-reservation-app .ar-agent-modal .ar-agent-search {
  position: relative;
  margin-bottom: var(--ar-spacing-md);
}

.add-reservation-app .ar-agent-modal .ar-search-input {
  /* Inherits base search-input styles including padding-right: 40px */
}

.add-reservation-app .ar-agent-modal .ar-search-icon {
  position: absolute;
  top: 50%;
  right: var(--ar-spacing-md);
  transform: translateY(-50%);
  color: var(--ar-text-secondary);
  pointer-events: none;
}

.add-reservation-app .ar-agent-modal .ar-agent-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--ar-border-color);
  border-radius: var(--ar-radius-sm);
  margin-bottom: var(--ar-spacing-lg);
}

.add-reservation-app .ar-agent-modal .ar-agent-item {
  padding: var(--ar-spacing-sm) var(--ar-spacing-md);
  border-bottom: 1px solid var(--ar-background-light);
  cursor: pointer;
  transition: background-color var(--ar-transition-fast);
}

.add-reservation-app .ar-agent-modal .ar-agent-item:last-child {
  border-bottom: none;
}

.add-reservation-app .ar-agent-modal .ar-agent-item:hover {
  background-color: var(--ar-background-light);
}

.add-reservation-app .ar-agent-modal .ar-agent-item.selected {
  background-color: color-mix(in srgb, var(--cbat-primary) 10%, var(--cbat-bg));
  color: var(--ar-primary-color);
  font-weight: 500;
}

.add-reservation-app .ar-agent-modal .ar-modal-footer {
  padding: var(--ar-spacing-lg);
  border-top: 1px solid var(--ar-border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--ar-spacing-md);
}

/* Responsive */
@media (max-width: 768px) {
  .add-reservation-app .ar-agent-modal {
    padding: var(--ar-spacing-md);
  }
  
  .add-reservation-app .ar-agent-modal .ar-modal-content {
    max-height: 100%;
    margin: var(--ar-spacing-md);
  }
  
  .add-reservation-app .ar-agent-modal .ar-modal-header,
  .add-reservation-app .ar-agent-modal .ar-modal-body,
  .add-reservation-app .ar-agent-modal .ar-modal-footer {
    padding: var(--ar-spacing-md);
  }
  
  .add-reservation-app .ar-agent-modal .ar-modal-title {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   4. Page-Specific Styles - Confirm Contact Modal
   ========================================================================== */
.add-reservation-app .ar-confirm-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--ar-spacing-lg);
}

.add-reservation-app .ar-confirm-modal .ar-modal-content {
  background-color: var(--ar-bg);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.add-reservation-app .ar-confirm-modal .ar-modal-header {
  padding: var(--ar-spacing-lg);
  border-bottom: 1px solid var(--ar-border-color);
  align-items: center;
}

.add-reservation-app .ar-confirm-modal .ar-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  margin: 0;
}

.add-reservation-app .ar-confirm-modal .ar-modal-body {
  padding: var(--ar-spacing-xl);
}

.add-reservation-app .ar-confirm-modal .ar-duplicate-intro {
  font-size: var(--ar-font-size-base);
  color: var(--ar-text-secondary);
  margin: 0 0 var(--ar-spacing-lg);
  align-items: center;
}

.add-reservation-app .ar-confirm-modal .ar-contact-info {
  background-color: var(--ar-background-light);
  border-radius: var(--ar-radius-md);
  padding: var(--ar-spacing-lg);
  margin: 0 0 var(--ar-spacing-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ar-spacing-sm) var(--ar-spacing-lg);
  align-items: baseline;
}

.add-reservation-app .ar-confirm-modal .ar-contact-info dt {
  color: var(--ar-text-secondary);
  font-weight: 500;
  font-size: var(--ar-font-size-small);
  display: flex;
  align-items: center;
  gap: var(--ar-spacing-xs);
}

.add-reservation-app .ar-confirm-modal .ar-contact-info dt i {
  color: var(--ar-primary-color);
  width: 16px;
  align-items: center;
}

.add-reservation-app .ar-confirm-modal .ar-contact-info dd {
  margin: 0;
  color: var(--ar-text-primary);
  font-weight: 600;
  font-size: var(--ar-font-size-base);
  line-height: 1.4;
}

.add-reservation-app .ar-confirm-modal .ar-duplicate-question {
  font-size: var(--ar-font-size-base);
  font-weight: 600;
  color: var(--ar-text-primary);
  margin: 0;
  align-items: center;
}

.add-reservation-app .ar-confirm-modal .ar-modal-footer {
  padding: var(--ar-spacing-lg);
  border-top: 1px solid var(--ar-border-color);
  display: flex;
  justify-content: center;
  gap: var(--ar-spacing-md);
}

/* Secondary button style - using consolidated styles from above */

/* Responsive adjustments for confirm modal */
@media (max-width: 768px) {
  .add-reservation-app .ar-confirm-modal {
    padding: var(--ar-spacing-md);
  }
  
  .add-reservation-app .ar-confirm-modal .ar-modal-content {
    max-width: 100%;
    margin: var(--ar-spacing-md);
  }
  
  .add-reservation-app .ar-confirm-modal .ar-modal-header,
  .add-reservation-app .ar-confirm-modal .ar-modal-body,
  .add-reservation-app .ar-confirm-modal .ar-modal-footer {
    padding: var(--ar-spacing-md);
  }
  
  .add-reservation-app .ar-confirm-modal .ar-modal-title {
    font-size: 1.25rem;
  }
  
  .add-reservation-app .ar-confirm-modal .ar-modal-footer {
    flex-direction: column-reverse;
    gap: var(--ar-spacing-sm);
  }
  
  .add-reservation-app .ar-confirm-modal .ar-modal-footer .ar-button {
    width: 100%;
  }
}

/* Extract of fixed CSS for Edit and Add Contact pages */

/* ==========================================================================
   4. Page-Specific Styles - Edit Contact Page & Add Contact Page
   ========================================================================== */
/* These two pages share the same layout and styling */
.add-reservation-app .edit-contact-page,
.add-reservation-app .add-contact-page {
  padding: var(--ar-spacing-lg) var(--ar-spacing-xl);
  max-width: 100%;
  margin: 0;
}

.add-reservation-app .edit-contact-page .ar-page-title,
.add-reservation-app .add-contact-page .ar-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  align-items: center;
  margin-bottom: var(--ar-spacing-xl);
}

/* Form Container */
.add-reservation-app .edit-contact-page .ar-form-container,
.add-reservation-app .add-contact-page .ar-form-container {
  background-color: var(--ar-background-light);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: var(--ar-spacing-xl);
}

/* Form Rows */
.add-reservation-app .edit-contact-page .ar-form-row,
.add-reservation-app .add-contact-page .ar-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ar-spacing-lg);
  margin-bottom: var(--ar-spacing-lg);
}

.add-reservation-app .edit-contact-page .ar-form-row:last-of-type,
.add-reservation-app .add-contact-page .ar-form-row:last-of-type {
  margin-bottom: 0;
}

/* Form Groups */
.add-reservation-app .edit-contact-page .ar-form-group,
.add-reservation-app .add-contact-page .ar-form-group {
  position: relative;
}

.add-reservation-app .edit-contact-page .ar-label,
.add-reservation-app .add-contact-page .ar-label {
  display: block;
  font-weight: 500;
  color: var(--ar-text-primary);
  margin-bottom: var(--ar-spacing-sm);
  font-size: var(--ar-font-size-base);
}

/* Input styles handled by base .ar-input class */
/* Error states and error text handled by base form element styles */

/* Button Row */
.add-reservation-app .edit-contact-page .ar-button-row,
.add-reservation-app .add-contact-page .ar-button-row {
  display: flex;
  justify-content: center;
  gap: var(--ar-spacing-md);
  margin-top: var(--ar-spacing-xl);
  padding-top: var(--ar-spacing-xl);
  border-top: 1px solid var(--ar-border-color);
}

.add-reservation-app .edit-contact-page .ar-button-row .ar-button,
.add-reservation-app .add-contact-page .ar-button-row .ar-button {
  min-width: 120px;
}

/* Notification */
.add-reservation-app .edit-contact-page .ar-notification,
.add-reservation-app .add-contact-page .ar-notification {
  position: fixed;
  bottom: var(--ar-spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ar-error-color);
  color: white;
  padding: var(--ar-spacing-md) var(--ar-spacing-lg);
  border-radius: var(--ar-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-size: var(--ar-font-size-base);
  z-index: 1000;
}

/* ==========================================================================
   IntlTelInput Integration Styles
   ========================================================================== */

/* Override intl-tel-input default styles to work with ar- prefix pattern */
.add-reservation-app .iti {
  position: relative;
  display: block;
  width: 100%;
}

.add-reservation-app .iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  left: 0;
  padding: 0;
}

.add-reservation-app .iti__selected-flag {
  z-index: 4;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0 0 8px;
}

.add-reservation-app .iti__flag {
  width: 16px;
  height: 11px;
  box-shadow: 0px 0px 1px 0px var(--cbat-text-muted);
  background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@22.0.2/build/img/flags.png");
  background-repeat: no-repeat;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .add-reservation-app .iti__flag {
    background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@22.0.2/build/img/flags@2x.png");
    background-size: 5652px 15px;
  }
}

.add-reservation-app .iti__arrow {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--cbat-text-muted);
}

.add-reservation-app .iti__arrow--up {
  border-top: none;
  border-bottom: 4px solid var(--cbat-text-muted);
}

/* Ensure proper padding for the phone input to accommodate flag */
.add-reservation-app .iti--allow-dropdown input,
.add-reservation-app .iti--allow-dropdown input[type=tel] {
  padding-right: 6px;
  padding-left: 90px !important;
  margin-left: 0;
}

/* Country dropdown styles */
.add-reservation-app .iti__dropdown {
  position: absolute;
  z-index: 9999;
}

.add-reservation-app .iti__dropdown-content {
  max-height: 300px;
  overflow-y: scroll;
  background-color: var(--ar-bg);
  border: 1px solid var(--ar-border-color);
  border-radius: var(--ar-radius-sm);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.add-reservation-app .iti__search-input {
  width: 100%;
  padding: 8px;
  border: none;
  border-bottom: 1px solid var(--ar-border-color);
  font-size: var(--ar-font-size-base);
  font-family: var(--ar-font-family);
}

.add-reservation-app .iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.add-reservation-app .iti__country {
  padding: 8px 10px;
  cursor: pointer;
}

.add-reservation-app .iti__country:hover {
  background-color: var(--ar-background-light);
}

.add-reservation-app .iti__country.iti__highlight {
  background-color: var(--ar-background-light);
}

.add-reservation-app .iti__flag-box {
  display: inline-block;
  margin-right: 6px;
}

.add-reservation-app .iti__country-name {
  margin-right: 6px;
}

.add-reservation-app .iti__dial-code {
  color: var(--ar-text-secondary);
}

/* Success state for valid fields */
/* Valid state handled by base form element styles */

/* Email suggestion styles */
.add-reservation-app .ar-email-suggestion {
  font-size: var(--ar-font-size-small);
  color: var(--ar-text-secondary);
  margin-top: var(--ar-spacing-xs);
  padding: var(--ar-spacing-xs) 0;
}

.add-reservation-app .ar-suggestion-link {
  color: var(--ar-primary-color);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.add-reservation-app .ar-suggestion-link:hover {
  text-decoration: underline;
}

.add-reservation-app .ar-valid-icon {
  position: absolute;
  right: var(--ar-spacing-sm);
  top: calc(var(--ar-spacing-sm) + 1.75rem);
  transform: translateY(50%);
  color: var(--ar-secondary-color);
  font-size: 1rem;
  pointer-events: none;
}

/* Warning state for fields */
/* Warning state handled by base form element styles */

.add-reservation-app .ar-warning-icon {
  position: absolute;
  right: var(--ar-spacing-sm);
  top: calc(var(--ar-spacing-sm) + 1.75rem);
  transform: translateY(50%);
  color: var(--ar-warning-color);
  font-size: 1rem;
  pointer-events: none;
}

.add-reservation-app .ar-warning-text {
  display: block;
  color: var(--ar-warning-color);
  font-size: var(--ar-font-size-small);
  margin-top: var(--ar-spacing-xs);
  line-height: 1.4;
}

/* Duplicate contact warning */
.add-reservation-app .ar-duplicate-warning {
  display: flex;
  align-items: center;
  gap: var(--ar-spacing-sm);
  padding: var(--ar-spacing-sm) var(--ar-spacing-md);
  margin-top: var(--ar-spacing-sm);
  background-color: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--cbat-bg));
  border-radius: var(--ar-radius-sm);
  color: var(--warning-dark);
  font-size: var(--ar-font-size-small);
  line-height: 1.4;
}

.add-reservation-app .ar-duplicate-warning i {
  color: var(--ar-warning-color);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Checking duplicate indicator */
.add-reservation-app .ar-checking-duplicate {
  display: flex;
  align-items: center;
  gap: var(--ar-spacing-xs);
  margin-top: var(--ar-spacing-xs);
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-small);
}

.add-reservation-app .ar-checking-duplicate i {
  flex-shrink: 0;
  color: var(--ar-primary-color);
}

.add-reservation-app .ar-form-group {
  position: relative;
}

.add-reservation-app .ar-intl-tel-input-wrapper .ar-valid {
  border-color: var(--ar-secondary-color);
}

.add-reservation-app .ar-intl-tel-input-wrapper .ar-valid-text {
  color: var(--ar-secondary-color);
  font-size: var(--ar-font-size-small);
  margin-top: var(--ar-spacing-xs);
  display: block;
}

/* ==========================================================================
   4. Page-Specific Styles - Passengers Page
   ========================================================================== */
/* Override base_test.css formArea constraints */
.add-reservation-app {
  max-width: 100% !important;
  width: 100%;
}

/* Page Introduction Section */
.add-reservation-app .passengers-page .ar-page-intro {
  align-items: center;
  margin-bottom: var(--ar-spacing-xl);
  padding: var(--ar-spacing-xl) var(--ar-spacing-md);
}

.add-reservation-app .passengers-page .ar-main-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ar-text-primary);
  margin-bottom: var(--ar-spacing-md);
  line-height: 1.3;
}

.add-reservation-app .passengers-page .ar-intro-text {
  font-size: 1.125rem;
  color: var(--ar-text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.add-reservation-app .passengers-page {
  padding: var(--ar-spacing-lg);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}

/* Background decoration */
.add-reservation-app .passengers-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--cbat-primary) 3%, transparent) 0%, transparent 50%), /* ci-exempt — decorative bg tint */
    radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--success) 2%, transparent) 0%, transparent 50%), /* ci-exempt — decorative bg tint */
    radial-gradient(circle at 40% 20%, color-mix(in srgb, var(--warning) 2%, transparent) 0%, transparent 50%); /* ci-exempt — decorative bg tint */
  pointer-events: none;
  z-index: -1;
}

/* Page titles */
.add-reservation-app .passengers-page .ar-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--ar-text-primary);
  align-items: center;
  margin-bottom: var(--ar-spacing-xl);
}

/* Enhanced title for main search section */
.add-reservation-app .passengers-page > .ar-search-section .ar-page-title {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--ar-primary-color), var(--cbat-primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--ar-spacing-md);
  position: relative;
  z-index: 1;
}

/* Compact title for nested sections */
.add-reservation-app .passengers-page .ar-search-section .ar-page-title {
  font-size: 1.25rem;
  margin-bottom: var(--ar-spacing-md);
}

/* Search section - Enhanced design */
.add-reservation-app .passengers-page .ar-search-section {
  margin-bottom: var(--ar-spacing-xl);
  padding: var(--ar-spacing-xl);
  background: var(--cbat-bg-secondary);
  border: 1px solid color-mix(in srgb, var(--cbat-primary) 20%, var(--cbat-bg));
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* Decorative element */
.add-reservation-app .passengers-page .ar-search-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 40%;
  height: 200%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cbat-primary) 5%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.add-reservation-app .passengers-page .ar-search-hint {
  color: var(--ar-text-secondary);
  font-size: 1rem;
  align-items: center;
  margin-bottom: var(--ar-spacing-lg);
  margin-top: calc(var(--ar-spacing-sm) * -1);
  font-weight: 400;
  letter-spacing: 0.2px;
}

.add-reservation-app .passengers-page .ar-search-controls {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: var(--ar-spacing-md);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.add-reservation-app .passengers-page .ar-search-input {
  flex: 1;
  max-width: 400px;
  padding: 0.75rem 1.25rem;
  border: 2px solid color-mix(in srgb, var(--cbat-primary) 20%, var(--cbat-bg));
  border-radius: var(--ar-radius-md);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.add-reservation-app .passengers-page .ar-search-input:focus {
  box-shadow: 0 0 0 3px rgba(90, 159, 212, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.add-reservation-app .passengers-page .ar-search-input::placeholder {
  font-style: italic;
}

/* Enhanced primary button for search - uses base button with extra styling */
.add-reservation-app .passengers-page .ar-search-controls .ar-button-primary {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, var(--ar-primary-color) 0%, var(--cbat-primary-dark) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.add-reservation-app .passengers-page .ar-search-controls .ar-button-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--cbat-primary-dark) 0%, var(--ar-primary-color) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Search results */
.add-reservation-app .passengers-page .ar-search-results {
  margin-top: var(--ar-spacing-lg);
  animation: fadeInUp 0.3s ease-out;
}

.add-reservation-app .passengers-page .ar-search-results > div {
  background-color: var(--ar-bg);
  border-radius: var(--ar-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.add-reservation-app .passengers-page .ar-search-results h4 {
  margin: 0;
  padding: var(--ar-spacing-lg);
  background-color: var(--ar-background-light);
  color: var(--ar-text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 1px solid var(--ar-border-color);
}

.add-reservation-app .passengers-page .ar-loading {
  align-items: center;
  padding: var(--ar-spacing-xl);
}

.add-reservation-app .passengers-page .ar-loading h4 {
  color: var(--ar-primary-color);
  margin-bottom: var(--ar-spacing-sm);
}

.add-reservation-app .passengers-page .ar-loading p {
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-base);
}

.add-reservation-app .passengers-page .ar-results-table {
  width: 100%;
  border-collapse: collapse;
}

.add-reservation-app .passengers-page .ar-results-table th {
  padding: var(--ar-spacing-md) var(--ar-spacing-lg);
  text-align: left;
  font-weight: 600;
  font-size: var(--ar-font-size-small);
  color: var(--ar-text-secondary);
  background-color: var(--ar-background-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.add-reservation-app .passengers-page .ar-results-table th:last-child,
.add-reservation-app .passengers-page .ar-results-table td:last-child {
  text-align: right;
}

.add-reservation-app .passengers-page .ar-results-table td {
  padding: var(--ar-spacing-md) var(--ar-spacing-lg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--ar-text-primary);
  vertical-align: middle;
}

.add-reservation-app .passengers-page .ar-results-table tbody tr {
  transition: background-color 0.2s ease;
}

.add-reservation-app .passengers-page .ar-results-table tbody tr:hover {
  background-color: var(--ar-background-light);
}

.add-reservation-app .passengers-page .ar-results-table tbody tr:last-child td {
  border-bottom: none;
}

/* Smaller, more refined Add buttons in table */
.add-reservation-app .passengers-page .ar-results-table .ar-button {
  padding: var(--ar-spacing-xs) var(--ar-spacing-md);
  font-size: var(--ar-font-size-small);
}

/* Modern card-based results list - Main search */
.add-reservation-app .passengers-page .ar-search-section > .ar-search-results .ar-results-list {
  display: flex;
  flex-direction: column;
  gap: var(--ar-spacing-sm);
  padding: var(--ar-spacing-lg);
  max-height: 400px;
  overflow-y: auto;
}

.add-reservation-app .passengers-page .ar-result-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ar-spacing-lg);
  background-color: var(--ar-bg);
  border: 1px solid var(--ar-border-light);
  border-radius: var(--ar-radius-md);
  transition: all 0.2s ease;
}

.add-reservation-app .passengers-page .ar-result-card:hover {
  border-color: var(--ar-primary-color);
  box-shadow: 0 4px 12px rgba(90, 159, 212, 0.1);
  transform: translateY(-1px);
}

.add-reservation-app .passengers-page .ar-person-info {
  display: flex;
  align-items: center;
  gap: var(--ar-spacing-md);
}

.add-reservation-app .passengers-page .ar-person-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ar-background-light);
  border-radius: 50%;
  color: var(--ar-primary-color);
  font-size: 1.25rem;
}

.add-reservation-app .passengers-page .ar-person-details {
  flex: 1;
}

.add-reservation-app .passengers-page .ar-person-name {
  margin: 0 0 var(--ar-spacing-xs) 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ar-text-primary);
}

.add-reservation-app .passengers-page .ar-person-dob {
  margin: 0;
  font-size: var(--ar-font-size-small);
  color: var(--ar-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--ar-spacing-xs);
  font-weight: 500;
}

.add-reservation-app .passengers-page .ar-person-age {
  color: var(--ar-text-tertiary);
  font-weight: normal;
}

.ar-loading-text {
  color: var(--ar-text-tertiary);
  font-style: italic;
}

.add-reservation-app .passengers-page .ar-button-add {
  display: flex;
  align-items: center;
  gap: var(--ar-spacing-xs);
  padding: var(--ar-spacing-sm) var(--ar-spacing-lg);
  white-space: nowrap;
}

/* Scrollbar styling for main search results list */
.add-reservation-app .passengers-page .ar-search-section > .ar-search-results .ar-results-list::-webkit-scrollbar {
  width: 8px;
}

.add-reservation-app .passengers-page .ar-search-section > .ar-search-results .ar-results-list::-webkit-scrollbar-track {
  background: var(--ar-background-light);
  border-radius: var(--ar-radius-sm);
}

.add-reservation-app .passengers-page .ar-search-section > .ar-search-results .ar-results-list::-webkit-scrollbar-thumb {
  background: var(--ar-border-color);
  border-radius: var(--ar-radius-sm);
}

.add-reservation-app .passengers-page .ar-search-section > .ar-search-results .ar-results-list::-webkit-scrollbar-thumb:hover {
  background: var(--ar-text-secondary);
}

.add-reservation-app .passengers-page .ar-no-results {
  align-items: center;
  padding: var(--ar-spacing-xl);
  color: var(--ar-text-secondary);
}

.add-reservation-app .passengers-page .ar-no-results .ar-hint {
  color: var(--ar-primary-color);
  font-size: var(--ar-font-size-small);
  margin-top: var(--ar-spacing-md);
  font-weight: 500;
}

/* Add Manually Option */
.add-reservation-app .passengers-page .ar-add-manually-option {
  align-items: center;
  padding: var(--ar-spacing-xl) var(--ar-spacing-lg);
  background-color: var(--ar-background-light);
  border-top: 1px solid var(--ar-border-color);
}

.add-reservation-app .passengers-page .ar-add-manually-option p {
  margin: 0 0 var(--ar-spacing-md) 0;
  color: var(--ar-text-secondary);
  font-size: var(--ar-font-size-base);
}

/* Animation for search results */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Passenger form section - Enhanced with color */
.add-reservation-app .passengers-page .ar-pax-section {
  background: var(--cbat-bg);
  border-radius: var(--ar-radius-lg);
  padding: var(--ar-spacing-lg) var(--ar-spacing-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--cbat-primary) 10%, var(--cbat-bg));
}

/* Passenger selector */
.add-reservation-app .passengers-page .ar-pax-selector {
  margin-bottom: var(--ar-spacing-xl);
  align-items: center;
}

.add-reservation-app .passengers-page .ar-pax-selector label {
  display: block;
  font-weight: 600;
  color: var(--ar-text-primary);
  margin-bottom: var(--ar-spacing-sm);
  font-size: var(--ar-font-size-large);
}

.add-reservation-app .passengers-page .ar-pax-selector select {
  padding: var(--ar-spacing-sm) var(--ar-spacing-md);
  font-size: var(--ar-font-size-base);
  border: 1px solid var(--ar-border-color);
  border-radius: var(--ar-radius-sm);
  background-color: var(--ar-bg);
  cursor: pointer;
  min-width: 120px;
}

/* Passenger list */
.add-reservation-app .passengers-page .ar-pax-list {
  margin-bottom: var(--ar-spacing-xl);
}

/* Individual passenger item - matching saved passenger design */
.add-reservation-app .passengers-page .ar-pax-item {
  background-color: var(--ar-bg);
  border: 1px solid var(--ar-border-color);
  border-radius: var(--ar-radius-md);
  overflow: hidden;
  margin-bottom: var(--ar-spacing-lg);
  transition: all 0.2s ease;
}

/* Remove border from pax-item when it contains a saved passenger to avoid double borders */
.add-reservation-app .passengers-page .ar-pax-item:has(.ar-saved-passenger) {
  border: none;
  background: none;
  overflow: visible;
}

.add-reservation-app .passengers-page .ar-pax-item:hover {
  border-color: var(--ar-primary-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Don't apply hover to pax-item when it has saved passenger (let saved passenger handle it) */
.add-reservation-app .passengers-page .ar-pax-item:has(.ar-saved-passenger):hover {
  border-color: transparent;
  box-shadow: none;
}

.add-reservation-app .passengers-page .ar-pax-item.ar-pax-unsaved {
  border-color: var(--ar-error-color);
}

/* Passenger header - matching saved design */
.add-reservation-app .passengers-page .ar-pax-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ar-background-light);
  padding: var(--ar-spacing-md) var(--ar-spacing-lg);
  border-bottom: 1px solid var(--ar-border-color);
}

.add-reservation-app .passengers-page .ar-pax-header h3 {
  margin: 0;
  font-size: var(--ar-font-size-base);
  font-weight: 600;
  color: var(--ar-text-primary);
}

.add-reservation-app .passengers-page .ar-pax-status {
  display: flex;
  align-items: center;
  gap: var(--ar-spacing-xs);
  font-size: var(--ar-font-size-small);
}

.add-reservation-app .passengers-page .ar-pax-status.ar-saved {
  color: var(--ar-secondary-color);
}

.add-reservation-app .passengers-page .ar-pax-status.ar-unsaved {
  color: var(--ar-error-color);
  font-weight: 500;
}

/* Passenger form */
.add-reservation-app .passengers-page .ar-pax-form {
  padding: var(--ar-spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--ar-spacing-xs);
}

/* Form row layout */
.add-reservation-app .passengers-page .ar-pax-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--ar-spacing-lg);
  margin-bottom: var(--ar-spacing-md);
}

/* First row with 3 required fields */
/* Updated selector to account for instruction text before first form row */
.add-reservation-app .passengers-page .ar-form-instructions + .ar-pax-form-row {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Phone and Email row - 2 columns */
.add-reservation-app .passengers-page .ar-optional-section + .ar-pax-form-row {
  grid-template-columns: 1fr 1fr;
}

.add-reservation-app .passengers-page .ar-pax-form-group {
  position: relative;
}

/* Wide form group spans 2 columns */
.add-reservation-app .passengers-page .ar-pax-form-group-wide {
  grid-column: span 2;
}

/* Full width form group spans entire row */
.add-reservation-app .passengers-page .ar-pax-form-group-full {
  grid-column: 1 / -1;
}

.add-reservation-app .passengers-page .ar-pax-form-group label {
  display: inline-block;
  font-weight: 600;
  color: var(--ar-text-secondary);
  margin-bottom: var(--ar-spacing-xs);
  font-size: var(--ar-font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.add-reservation-app .passengers-page .ar-pax-form-group input {
  width: 100%;
  padding: 0.625rem var(--ar-spacing-md);
  font-size: var(--ar-font-size-base);
  border: 1px solid var(--ar-border-color);
  border-radius: var(--ar-radius-sm);
  background: var(--cbat-bg);
  transition: all var(--ar-transition-fast);
}

.add-reservation-app .passengers-page .ar-pax-form-group input:focus {
  outline: 2px solid var(--ar-primary-color);
  outline-offset: 2px;
  border-color: var(--ar-primary-color);
  box-shadow: 0 0 0 0.2rem rgba(90, 159, 212, 0.25);
}

.add-reservation-app .passengers-page .ar-pax-form-group input.ar-error {
  border-color: var(--ar-error-color);
  border-width: 2px; /* Thicker border for better visibility */
}

.add-reservation-app .passengers-page .ar-error-text {
  display: block;
  color: var(--ar-error-color);
  font-size: var(--ar-font-size-small);
  margin-top: var(--ar-spacing-xs);
}

/* Email suggestion styling */
.add-reservation-app .passengers-page .ar-email-suggestion {
  margin-top: var(--ar-spacing-xs);
  padding: var(--ar-spacing-xs) var(--ar-spacing-sm);
  background-color: color-mix(in srgb, var(--cbat-primary) 10%, var(--cbat-bg));
  border-radius: var(--ar-radius-sm);
  font-size: var(--ar-font-size-small);
  color: var(--ar-text-secondary);
  display: inline-block;
}

.add-reservation-app .passengers-page .ar-suggestion-link {
  color: var(--ar-primary-color);
  text-decoration: underline;
  font-weight: 500;
  cursor: pointer;
}

.add-reservation-app .passengers-page .ar-suggestion-link:hover {
  color: var(--ar-primary-hover);
  text-decoration: none;
}

/* Actions section in form */
.add-reservation-app .passengers-page .ar-pax-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ar-spacing-sm);
  padding-top: var(--ar-spacing-sm);
  border-top: 1px solid var(--ar-border-light);
}

/* Save button uses base ar-button-save styles */

/* Error button uses base ar-button-error styles */

/* Passenger autocomplete */
.add-reservation-app .passengers-page .ar-pax-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--ar-bg);
  border: 1px solid var(--ar-border-color);
  border-top: none;
  border-radius: 0 0 var(--ar-radius-sm) var(--ar-radius-sm);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

.add-reservation-app .passengers-page .ar-autocomplete-row {
  padding: var(--ar-spacing-sm) var(--ar-spacing-md);
  cursor: pointer;
  transition: background-color var(--ar-transition-fast);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-reservation-app .passengers-page .ar-autocomplete-row:hover {
  background-color: var(--ar-background-light);
}

.add-reservation-app .passengers-page .ar-autocomplete-row p {
  margin: 0;
  font-size: var(--ar-font-size-small);
}

/* Passenger actions */
.add-reservation-app .passengers-page .ar-pax-actions {
  display: flex;
  gap: var(--ar-spacing-sm);
  justify-content: flex-end;
  margin-top: var(--ar-spacing-lg);
}

/* Phase 3: Instructional text styles */
.add-reservation-app .passengers-page .ar-form-instructions {
  margin: var(--ar-spacing-lg) 0 var(--ar-spacing-sm) 0;
  font-weight: 600;
  color: var(--ar-text-primary);
  font-size: var(--ar-font-size-base);
}

.add-reservation-app .passengers-page .ar-form-instructions i {
  margin-right: var(--ar-spacing-xs);
  opacity: 0.8;
}

.add-reservation-app .passengers-page .ar-required-section {
  color: var(--ar-error-color);
}

.add-reservation-app .passengers-page .ar-optional-section {
  color: var(--ar-primary-color);
}

.add-reservation-app .passengers-page .ar-optional-section .ar-help-text {
  font-weight: normal;
  font-size: var(--ar-font-size-small);
  margin-left: var(--ar-spacing-xs);
  color: var(--ar-text-secondary);
  opacity: 0.8;
}

/* Saved passenger design - Refined card layout */
.add-reservation-app .passengers-page .ar-saved-passenger {
  background: var(--cbat-bg);
  border: 1px solid var(--cbat-border-light);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-bottom: var(--ar-spacing-md);
  position: relative;
}

.add-reservation-app .passengers-page .ar-saved-passenger:hover {
  border-color: color-mix(in srgb, var(--cbat-primary) 40%, var(--cbat-bg));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Left accent bar */
.add-reservation-app .passengers-page .ar-saved-passenger::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ar-primary-color), var(--cbat-primary-dark));
  transition: width 0.2s ease;
}

.add-reservation-app .passengers-page .ar-saved-passenger:hover::before {
  width: 6px;
}

/* Header section with passenger number and saved status */
.add-reservation-app .passengers-page .ar-saved-header {
  background: var(--cbat-bg-secondary);
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--cbat-border-light);
}

.add-reservation-app .passengers-page .ar-saved-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-reservation-app .passengers-page .ar-saved-number {
  font-weight: 500;
  color: var(--ar-text-secondary);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.add-reservation-app .passengers-page .ar-saved-status {
  color: var(--success);
  font-size: var(--cbat-font-size-xs);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--success-bg);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Body section with passenger info and actions */
.add-reservation-app .passengers-page .ar-saved-body {
  padding: 1.5rem 1.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.add-reservation-app .passengers-page .ar-saved-info {
  flex: 1;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Add passenger avatar container */
.add-reservation-app .passengers-page .ar-saved-avatar {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cbat-primary) 12%, var(--cbat-bg));
  border-radius: 14px;
  color: var(--ar-primary-color);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.add-reservation-app .passengers-page .ar-saved-avatar i {
  font-size: 1.375rem;
}

/* Info content wrapper */
.add-reservation-app .passengers-page .ar-saved-content {
  flex: 1;
}

.add-reservation-app .passengers-page .ar-saved-name {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ar-primary-color);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.add-reservation-app .passengers-page .ar-saved-details {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  color: var(--ar-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.4;
}

.add-reservation-app .passengers-page .ar-saved-dob {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.add-reservation-app .passengers-page .ar-saved-dob::before {
  content: "\f073"; /* Font Awesome calendar icon */
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  font-size: 0.875rem;
  color: var(--ar-primary-color);
  opacity: 0.7;
}

.add-reservation-app .passengers-page .ar-saved-separator {
  color: var(--cbat-border-light);
  font-size: var(--cbat-font-size-xs);
}

.add-reservation-app .passengers-page .ar-saved-age {
  color: var(--ar-text-tertiary);
  font-weight: 400;
}

.add-reservation-app .passengers-page .ar-saved-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  flex-shrink: 0;
}

/* Contact Information for saved passengers */
.add-reservation-app .passengers-page .ar-saved-contact {
  margin: 0;
  font-size: 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  line-height: 1.4;
}

.add-reservation-app .passengers-page .ar-saved-contact > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cbat-text-muted);
  transition: color 0.2s ease;
}

.add-reservation-app .passengers-page .ar-saved-contact > span:hover {
  color: var(--ar-primary-color);
}

.add-reservation-app .passengers-page .ar-saved-contact i {
  font-size: 0.9375rem;
  color: var(--ar-primary-color);
  opacity: 0.7;
}

/* Make Remove button more subtle since it's the only action */
.add-reservation-app .passengers-page .ar-saved-actions .ar-button-ghost.ar-button-sm {
  border: 1px solid transparent;
  background: var(--cbat-bg-secondary);
  color: var(--ar-text-secondary);
  transition: all 0.2s ease;
  padding: 0.5rem 0.875rem;
  font-size: var(--cbat-font-size-sm);
}

.add-reservation-app .passengers-page .ar-saved-actions .ar-button-ghost.ar-button-sm:hover {
  background: color-mix(in srgb, var(--error) 10%, var(--cbat-bg));
  color: var(--ar-error-color);
  border-color: color-mix(in srgb, var(--error) 20%, var(--cbat-bg));
}

/* Button enhancements for passengers page - uses base button styles */
.add-reservation-app .passengers-page .ar-button-sm {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* Specific color overrides for passengers page */
.add-reservation-app .passengers-page .ar-button-secondary.ar-button-sm {
  background: var(--cbat-bg);
  color: var(--ar-primary-color);
  border-color: color-mix(in srgb, var(--cbat-primary) 25%, var(--cbat-bg));
}

.add-reservation-app .passengers-page .ar-button-secondary.ar-button-sm:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--ar-primary-color), var(--cbat-primary-dark));
  color: white;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.add-reservation-app .passengers-page .ar-button-ghost.ar-button-sm:hover:not(:disabled) {
  background: color-mix(in srgb, var(--error) 10%, var(--cbat-bg));
  color: var(--error);
  border-color: color-mix(in srgb, var(--error) 20%, var(--cbat-bg));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Add passenger search - Compact design */
.add-reservation-app .passengers-page .ar-add-passenger-search {
  margin-bottom: var(--ar-spacing-md);
  padding: var(--ar-spacing-md);
  background: var(--cbat-bg-secondary);
  border: 1px solid var(--cbat-border-light);
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-page-title {
  font-size: 1.25rem;
  margin-bottom: var(--ar-spacing-sm);
  color: var(--ar-primary-color);
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-search-hint {
  margin-top: 0;
  margin-bottom: var(--ar-spacing-sm);
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-search-controls {
  margin-bottom: 0;
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-search-results {
  margin-top: var(--ar-spacing-md);
  position: relative;
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-search-results > div {
  background-color: var(--ar-bg);
  border-radius: var(--ar-radius-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-results-list {
  max-height: 250px;
  overflow-y: auto;
  padding: var(--ar-spacing-md);
  gap: var(--ar-spacing-sm);
  display: flex;
  flex-direction: column;
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-add-manually-option {
  background: var(--ar-background-light);
  padding: var(--ar-spacing-md) var(--ar-spacing-lg);
  border-top: 1px solid var(--ar-border-color);
  margin-top: 0;
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-no-results {
  padding: var(--ar-spacing-md);
  background: var(--cbat-bg);
  border-radius: var(--ar-radius-sm);
  margin-top: var(--ar-spacing-md);
  border: 1px solid var(--ar-border-color);
}

.add-reservation-app .passengers-page .ar-add-passenger-search .ar-no-results p {
  margin: 0 0 var(--ar-spacing-sm) 0;
  font-size: var(--ar-font-size-small);
}

/* Add Passenger Section - Below passenger list */
.add-reservation-app .passengers-page .ar-add-passenger-section {
  display: flex;
  justify-content: center;
  margin-top: var(--ar-spacing-lg);
  margin-bottom: var(--ar-spacing-xl);
}

/* Final actions */
.add-reservation-app .passengers-page .ar-final-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--ar-spacing-xl);
  padding-top: var(--ar-spacing-xl);
}

.add-reservation-app .passengers-page .ar-button-add-pax {
  display: inline-flex;
  align-items: center;
  gap: var(--ar-spacing-sm);
  background: var(--cbat-bg);
  color: var(--ar-success-color);
  border: 2px solid var(--ar-success-color);
  font-weight: 600;
  transition: all 0.3s ease;
}

.add-reservation-app .passengers-page .ar-button-add-pax:hover {
  background: var(--ar-success-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.25);
}

/* Responsive */
@media (max-width: 768px) {
  .add-reservation-app .edit-contact-page,
  .add-reservation-app .add-contact-page,
  .add-reservation-app .passengers-page {
    padding: var(--ar-spacing-md);
  }
  
  .add-reservation-app .passengers-page .ar-pax-form-row {
    grid-template-columns: 1fr;
    gap: var(--ar-spacing-md);
  }
  
  /* Reset wide and full form groups on mobile */
  .add-reservation-app .passengers-page .ar-pax-form-group-wide,
  .add-reservation-app .passengers-page .ar-pax-form-group-full {
    grid-column: span 1;
  }
  
  .add-reservation-app .edit-contact-page .ar-form-container,
  .add-reservation-app .add-contact-page .ar-form-container {
    padding: var(--ar-spacing-lg);
  }
  
  .add-reservation-app .edit-contact-page .ar-form-row,
  .add-reservation-app .add-contact-page .ar-form-row {
    grid-template-columns: 1fr;
    gap: var(--ar-spacing-md);
  }
  
  .add-reservation-app .edit-contact-page .ar-page-title,
  .add-reservation-app .add-contact-page .ar-page-title {
    font-size: 1.5rem;
  }
  
  .add-reservation-app .edit-contact-page .ar-button-row,
  .add-reservation-app .add-contact-page .ar-button-row {
    flex-wrap: wrap;
    width: 100%;
  }
  
  .add-reservation-app .edit-contact-page .ar-button-row .ar-button,
  .add-reservation-app .add-contact-page .ar-button-row .ar-button {
    flex: 1;
    min-width: 100%;
  }
  
  /* Passengers page responsive */
  .add-reservation-app .passengers-page .ar-search-section {
    padding: var(--ar-spacing-lg);
  }
  
  .add-reservation-app .passengers-page .ar-search-controls {
    flex-direction: column;
    gap: var(--ar-spacing-md);
  }
  
  .add-reservation-app .passengers-page .ar-search-input {
    max-width: 100%;
  }
  
  .add-reservation-app .passengers-page .ar-pax-section {
    padding: var(--ar-spacing-lg);
  }
  
  .add-reservation-app .passengers-page .ar-pax-form {
    grid-template-columns: 1fr;
  }
  
  .add-reservation-app .passengers-page .ar-pax-actions {
    flex-direction: column;
    gap: var(--ar-spacing-md);
  }
  
  .add-reservation-app .passengers-page .ar-pax-actions .ar-button {
    width: 100%;
  }
  
  .add-reservation-app .passengers-page .ar-add-passenger-section {
    justify-content: center;
  }
  
  .add-reservation-app .passengers-page .ar-final-actions {
    flex-direction: column;
    gap: var(--ar-spacing-lg);
  }
  
  .add-reservation-app .passengers-page .ar-button-add-pax,
  .add-reservation-app .passengers-page .ar-button-primary {
    width: 100%;
    justify-content: center;
  }
  
  /* Responsive result cards */
  .add-reservation-app .passengers-page .ar-result-card {
    flex-direction: column;
    align-items: center;
    gap: var(--ar-spacing-md);
  }
  
  .add-reservation-app .passengers-page .ar-person-info {
    flex-direction: column;
  }
  
  .add-reservation-app .passengers-page .ar-button-add {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Dark Mode Overrides
   ========================================================================== */
html[data-theme="dark"] {
  --ar-bg: var(--cbat-bg);
  --ar-background-light: var(--cbat-bg-hover);
  --ar-text-primary: var(--cbat-text);
  --ar-text-secondary: var(--cbat-text-secondary);
  --ar-text-tertiary: var(--cbat-text-muted);
  --ar-border-color: var(--cbat-border);
  --ar-border-light: var(--cbat-border-light);
}

/* Table row hover — explicit contrast for dark mode (color-mix too subtle) */
html[data-theme="dark"] .add-reservation-app .contact-picker-page .ar-results-table tbody tr:hover,
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-results-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Passengers search section — replace hardcoded light blue gradient */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-search-section {
  background: var(--cbat-bg-secondary);
  border-color: var(--cbat-border);
  box-shadow: none;
}

/* Passengers review section — replace hardcoded white gradient */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-pax-section {
  background: var(--cbat-bg-secondary);
  border-color: var(--cbat-border);
  box-shadow: none;
}

/* Saved passenger card — replace hardcoded white and gray */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-saved-passenger {
  background: var(--cbat-bg);
  border-color: var(--cbat-border);
}

/* Saved passenger header strip — replace light gray */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-saved-header {
  background: var(--cbat-bg-secondary);
  border-bottom-color: var(--cbat-border);
}

/* Saved passenger avatar — replace light blue gradient */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-saved-avatar {
  background: var(--cbat-bg-secondary);
}

/* Passenger action button — replace white gradient */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-button-secondary.ar-button-sm {
  background: var(--cbat-bg-secondary);
  border-color: var(--cbat-border);
}

/* Remove button — replace light gray */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-saved-actions .ar-button-ghost.ar-button-sm {
  background: var(--cbat-bg-secondary);
  border-color: var(--cbat-border);
}

/* Add Passenger button — replace white gradient */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-button-add-pax {
  background: var(--cbat-bg-secondary);
}

/* Saved status badge — in dark mode, success is already adjusted */
html[data-theme="dark"] .add-reservation-app .passengers-page .ar-saved-status {
  color: var(--success);
  background: var(--success-bg);
}

/* Date input calendar icon — invert makes it white on dark backgrounds */
html[data-theme="dark"] .add-reservation-app input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Native inputs/selects without ar-input class (e.g. VendorSelect.vue) */
html[data-theme="dark"] .add-reservation-app input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] .add-reservation-app select {
  background-color: var(--cbat-bg);
  color: var(--cbat-text);
  border-color: var(--cbat-border);
}
/* ==========================================================================
   TK-2026-00427 — CurrencyInput component
   Scoped styles in CurrencyInput.vue don't apply (vite build output isn't
   served), so the visual styling lives here. The `$` is a sibling element
   to the <input> — display only, never stored in the Decimal value.
   ========================================================================== */
.add-reservation-app .currency-input-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.add-reservation-app .currency-prefix {
  font-weight: 600;
  color: var(--cbat-text);
  /* Right margin keeps the symbol clear of the input's focus highlight ring
     (which extends ~2-3px outside the border). */
  margin-right: 2px;
}

.add-reservation-app .currency-input {
  text-align: right;
}

.add-reservation-app .currency-input.large-amount {
  border-color: var(--cbat-warning);
}

/* Center the CurrencyInput wrapper within modal column groups so it sits
   under its centered label (was left-aligning by default since inline-flex
   width is content-sized). */
.add-reservation-app .change-profit-group,
.add-reservation-app .difference-group,
.add-reservation-app .cust-bal-group,
.add-reservation-app .vendor-price-group {
  align-items: center;
}

/* ==========================================================================
   Pricing page — "Money Time!" Deal Builder redesign
   Two-column layout: the numbers (left) + a live Deal Summary (right).
   The primitives below (.ar-card, .ar-two-col, .ar-summary-*) are intended
   as the reusable model for the wider booking-process refresh. All colors
   and fonts come from CBAT tokens, so light + dark modes work for free.
   ========================================================================== */

/* Reusable card primitive */
.add-reservation-app .ar-card {
  background: var(--cbat-bg);
  border: 1px solid var(--cbat-border-light);
  border-radius: 10px;
  padding: 16px 20px 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); /* ci-exempt - card lift shadow, no shadow token */
}

/* Page shell: a centered stack of cards with consistent 16px rhythm */
.add-reservation-app .ar-pricing-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* width:100% is required because this is a flex item inside .main-area
     (a column flexbox); without it the auto side-margins collapse the box to
     content width (~620px) instead of filling up to max-width. */
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--ar-spacing-xl) 0 32px;
}

/* Header card */
.add-reservation-app .ar-pricing-header .ar-page-title {
  margin: 0;
  color: var(--cbat-primary);
  font-family: var(--cbat-font-heading);
  font-weight: 700;
  font-size: var(--cbat-font-size-xl);
  line-height: 1.2;
}
.add-reservation-app .ar-pricing-header .ar-page-subtitle {
  margin: 6px 0 0;
  color: var(--cbat-text-muted);
  font-size: var(--cbat-font-size-sm);
}
.add-reservation-app .ar-pricing-header .ar-page-subtitle a {
  color: var(--cbat-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* Reusable responsive two-column grid (inputs + summary) */
.add-reservation-app .ar-two-col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Section titles + dividers inside cards */
.add-reservation-app .ar-section-title {
  margin: 0 0 12px;
  color: var(--cbat-primary);
  font-family: var(--cbat-font-heading);
  font-weight: 700;
  font-size: var(--cbat-font-size-lg);
  line-height: 1.25;
}
.add-reservation-app .ar-divider {
  border: none;
  border-top: 1px solid var(--cbat-primary-light);
  margin: 0 0 16px;
}

/* Form groups on the pricing page */
.add-reservation-app .ar-pricing-inputs .ar-form-group {
  margin-bottom: 16px;
}
.add-reservation-app .ar-pricing-inputs .ar-form-group:last-child {
  margin-bottom: 0;
}
.add-reservation-app .ar-pricing-inputs .ar-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: var(--cbat-font-size-sm);
  color: var(--cbat-text);
}
.add-reservation-app .ar-pricing-inputs .ar-label .tooltip {
  color: var(--cbat-text-muted);
  cursor: help;
}

/* Let the currency input fill the row (its wrapper is inline-flex by default) */
.add-reservation-app .ar-pricing-inputs .currency-input-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
}
.add-reservation-app .ar-pricing-inputs .currency-prefix {
  font-weight: 700;
  color: var(--cbat-text-muted);
}
.add-reservation-app .ar-pricing-inputs .currency-input {
  height: 40px;
  box-sizing: border-box;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Contextual markup / discount note */
.add-reservation-app .ar-pricing-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--cbat-border);
  border-radius: var(--ar-radius-md);
  background: var(--cbat-bg-secondary);
  color: var(--cbat-text);
  font-size: var(--cbat-font-size-sm);
  line-height: 1.45;
}
.add-reservation-app .ar-pricing-note--success {
  border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--cbat-bg));
}
.add-reservation-app .ar-pricing-note--error {
  border-left-color: var(--error);
  background: color-mix(in srgb, var(--error) 8%, var(--cbat-bg));
}
.add-reservation-app .ar-pricing-note--info {
  border-left-color: var(--info);
  background: color-mix(in srgb, var(--info) 8%, var(--cbat-bg));
}

/* Deal Summary panel — a soft-filled card that can dock while inputs scroll */
.add-reservation-app .ar-pricing-summary {
  background: var(--cbat-bg-secondary);
  position: sticky;
  top: 12px;
}
.add-reservation-app .ar-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: var(--cbat-font-size-sm);
}
.add-reservation-app .ar-summary-label {
  color: var(--cbat-text-muted);
}
.add-reservation-app .ar-summary-value {
  font-weight: 600;
  color: var(--cbat-text);
  font-variant-numeric: tabular-nums;
}
.add-reservation-app .ar-summary-divider {
  border: none;
  border-top: 1px solid var(--cbat-primary-light);
  margin: 8px 0;
}
.add-reservation-app .ar-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}
.add-reservation-app .ar-summary-total-label {
  font-family: var(--cbat-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--cbat-font-size-sm);
  color: var(--cbat-text);
}
.add-reservation-app .ar-summary-total-value {
  font-family: var(--cbat-font-heading);
  font-weight: 700;
  font-size: var(--cbat-font-size-xl);
  font-variant-numeric: tabular-nums;
  color: var(--cbat-text);
  transition: color var(--ar-transition-normal);
}
.add-reservation-app .ar-summary-total-value.is-positive {
  color: var(--success-dark);
}
.add-reservation-app .ar-summary-total-value.is-negative {
  color: var(--error);
}
.add-reservation-app .ar-summary-explain {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--cbat-border-light);
  font-size: var(--cbat-font-size-xs);
  color: var(--cbat-text-muted);
  line-height: 1.5;
}

/* Right rail: stacks the Deal Summary card above the primary action, sharing
   the same column width and 16px card rhythm so the CTA reads as "commit to
   this deal" — anchored to the numbers it confirms. */
.add-reservation-app .ar-pricing-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Continue action — full width of the right rail, directly under the summary */
.add-reservation-app .ar-pricing-actions {
  display: flex;
  justify-content: stretch;
}
.add-reservation-app .ar-pricing-actions .button.primary-button {
  width: 100%;
}

/* Responsive: stack panels; summary un-sticks (the rail already keeps the CTA
   full width, so no button override is needed here) */
@media (max-width: 768px) {
  .add-reservation-app .ar-two-col {
    grid-template-columns: 1fr;
  }
  .add-reservation-app .ar-pricing-summary {
    position: static;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .add-reservation-app .ar-summary-total-value {
    transition: none;
  }
}

/* ==========================================================================
   Product/Vendor page ("Trip Details") — TK-2026-00746
   Reuses the .ar-pricing-page / .ar-two-col / .ar-card / summary primitives
   (the documented booking-refresh model); only the vendor-specific bits below.
   ========================================================================== */

/* Second in-card section heading gets breathing room from the fields above */
.add-reservation-app .ar-section-title--next {
  margin-top: 22px;
}

/* Informational lock icon (fields disabled while amenities/gifts are chosen) */
.add-reservation-app .ar-lock-icon {
  color: var(--cbat-text-muted);
  margin-left: 4px;
  font-size: 0.9em;
}

/* Trip Summary rail: values read left-to-right, not right-justified — these are
   short text values, unlike the dollar figures the Deal Summary right-aligns. */
.add-reservation-app .ar-vendor-summary .ar-summary-row {
  justify-content: flex-start;
  gap: 14px;
}
.add-reservation-app .ar-vendor-summary .ar-summary-label {
  flex: 0 0 96px;
}
.add-reservation-app .ar-vendor-summary .ar-summary-value {
  text-align: left;
  font-variant-numeric: normal;
}

/* The whole rail (summary + Continue) docks as one unit while the long form
   scrolls — align-self:start shrinks the column to content so it has room to
   travel, and stickiness lives on the column, not the inner card (which would
   otherwise slide down over the Continue button on a tall form). */
.add-reservation-app .ar-vendor-col-right {
  align-self: start;
  position: sticky;
  top: 12px;
}
.add-reservation-app .ar-vendor-summary {
  position: static;
}
/* On mobile the rail is stacked below the form — un-dock it (declared after the
   sticky rule above so it wins at equal specificity). */
@media (max-width: 768px) {
  .add-reservation-app .ar-vendor-col-right {
    position: static;
  }
}

/* The shared flexible-autocomplete wrapper defaults to inline-block with an
   intrinsic width; force it to fill the field so the group picker matches its
   full-width siblings (the input inside already gets width:100% via .ar-input). */
.add-reservation-app #group-select {
  display: block;
  width: 100%;
}

/* Continue + Unlock stack full-width in the rail */
.add-reservation-app .ar-vendor-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Zero the base .button horizontal margin that otherwise shoves the full-width
   Continue 8px right and past the rail's edge. !important is required because
   base_test.css sets `.primary-button { margin: 0 .5em !important }`. */
.add-reservation-app .ar-vendor-actions .button.primary-button,
.add-reservation-app .ar-vendor-actions .ar-button {
  width: 100%;
  margin: 0 !important; /* ci-exempt - override base_test.css !important margin */
}

/* --------------------------------------------------------------------------
   VendorAutocomplete combobox (.ar-combo) — client-side vendor filter
   -------------------------------------------------------------------------- */
.add-reservation-app .ar-combo { position: relative; }
.add-reservation-app .ar-combo__field { position: relative; }
.add-reservation-app .ar-combo__icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--cbat-text-muted); pointer-events: none; font-size: 0.9em;
}
.add-reservation-app .ar-combo__caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--cbat-text-muted); pointer-events: none; font-size: 0.8em;
}
.add-reservation-app .ar-combo__input.ar-input { padding-left: 32px; padding-right: 30px; }
.add-reservation-app .ar-combo--disabled { opacity: 0.6; }
.add-reservation-app .ar-combo__menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--cbat-bg); border: 1px solid var(--cbat-border); border-radius: var(--ar-radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* ci-exempt - dropdown lift, no shadow token */
}
.add-reservation-app .ar-combo__opt {
  padding: 9px 12px; border-radius: var(--ar-radius-sm); cursor: pointer;
  font-size: var(--cbat-font-size-sm); color: var(--cbat-text); line-height: 1.3;
}
.add-reservation-app .ar-combo__opt.is-active {
  background: color-mix(in srgb, var(--cbat-primary) 14%, var(--cbat-bg));
}
.add-reservation-app .ar-combo__opt mark { background: transparent; color: var(--cbat-primary); font-weight: 700; }
.add-reservation-app .ar-combo__empty {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0;
  padding: 10px 12px; background: var(--cbat-bg); border: 1px solid var(--cbat-border);
  border-radius: var(--ar-radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* ci-exempt - dropdown lift, no shadow token */
  font-size: var(--cbat-font-size-sm); color: var(--cbat-text-muted);
}