/* Wrapper for modal form */
.quote-form-modal {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(60, 60, 60, 0.12);
  }
  
  /* Form elements */
  .quote-form-modal .form-label {
    font-weight: 600;
  }
  
  .quote-form-modal input,
  .quote-form-modal select,
  .quote-form-modal textarea {
    border-radius: 8px !important;
  }
  
  /* Buttons */
  .quote-form-modal .btn-danger,
  .quote-form-modal .btn-primary {
    border-radius: 8px;
    font-weight: 500;
  }
  
  .quote-form-modal .btn-outline-primary,
  .quote-form-modal .btn-outline-secondary {
    border-radius: 8px;
  }
  
  /* Modal-specific header/footer */
  .quote-form-modal #quoteModal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .quote-form-modal #quoteModal .modal-footer {
    border-top: none;
    padding-top: 0;
  }
  
  /* Traveller section styling */
  .quote-form-modal .traveller-col {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px #0001;
    padding: 18px 8px 10px 8px;
    margin: 0 8px;
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  
  .quote-form-modal .traveller-col:hover {
    border-color: #d32f2f;
    box-shadow: 0 4px 16px #d32f2f22;
  }
  
  .quote-form-modal .traveller-label {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 2px;
  }
  
  .quote-form-modal .traveller-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 1.2em;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    background: #f7f7f7 !important;
    color: #333 !important;
    transition: background 0.2s, border-color 0.2s;
  }
  
  .quote-form-modal .traveller-btn:active,
  .quote-form-modal .traveller-btn:focus {
    background: #e0e0e0 !important;
    border-color: #d32f2f !important;
  }
  
  .quote-form-modal .traveller-count {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 10px;
    min-width: 24px;
    display: inline-block;
  }
  
  /* Selectable buttons */
  .quote-form-modal .selectable-btn {
    border: 2px solid #bdbdbd;
    background: #fff;
    color: #333;
    border-radius: 8px;
    font-weight: 500;
    min-width: 100px;
    margin-bottom: 8px;
    transition: all 0.2s;
  }
  
  .quote-form-modal .selectable-btn.selected,
  .quote-form-modal .selectable-btn:active,
  .quote-form-modal .selectable-btn:focus {
    background: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
    box-shadow: 0 2px 8px #d32f2f22;
  }
  
  .quote-form-modal .selectable-btn:hover {
    border-color: #d32f2f;
    color: #d32f2f;
    background: #fff5f5;
  }
  
  /* Character counter */
  .quote-form-modal .char-counter {
    font-size: 0.9em;
    color: #888;
    float: right;
  }
  
/* ================== Modal Wrapper ================== */
.quote-form-modal {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(60, 60, 60, 0.12);
  }
  
  /* ================== Form Elements ================== */
  .quote-form-modal .form-label {
    font-weight: 600;
  }
  
  .quote-form-modal input,
  .quote-form-modal select,
  .quote-form-modal textarea {
    border-radius: 8px !important;
  }
  
  .quote-form-modal .btn-danger,
  .quote-form-modal .btn-primary {
    border-radius: 8px;
    font-weight: 500;
  }
  
  .quote-form-modal .btn-outline-primary,
  .quote-form-modal .btn-outline-secondary {
    border-radius: 8px;
  }
  
  /* ================== Modal Header/Footer ================== */
  .quote-form-modal #quoteModal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  .quote-form-modal #quoteModal .modal-footer {
    border-top: none;
    padding-top: 0;
  }
  
  /* ================== Traveller Selector ================== */
  .quote-form-modal .traveller-col {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px #0001;
    padding: 18px 8px 10px 8px;
    margin: 0 8px;
    transition: box-shadow 0.2s, border-color 0.2s;
  }
  
  .quote-form-modal .traveller-col:hover {
    border-color: #d32f2f;
    box-shadow: 0 4px 16px #d32f2f22;
  }
  
  .quote-form-modal .traveller-label {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 2px;
  }
  
  .quote-form-modal .traveller-btn {
    min-width: 36px;
    min-height: 36px;
    font-size: 1.2em;
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    background: #f7f7f7 !important;
    color: #333 !important;
    transition: background 0.2s, border-color 0.2s;
  }
  
  .quote-form-modal .traveller-btn:active,
  .quote-form-modal .traveller-btn:focus {
    background: #e0e0e0 !important;
    border-color: #d32f2f !important;
  }
  
  .quote-form-modal .traveller-count {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 10px;
    min-width: 24px;
    display: inline-block;
  }
  
  /* ================== Selectable Buttons ================== */
  .quote-form-modal .selectable-btn {
    border: 2px solid #bdbdbd;
    background: #fff;
    color: #333;
    border-radius: 8px;
    font-weight: 500;
    min-width: 100px;
    margin-bottom: 8px;
    transition: all 0.2s;
  }
  
  .quote-form-modal .selectable-btn.selected,
  .quote-form-modal .selectable-btn:active,
  .quote-form-modal .selectable-btn:focus {
    background: #d32f2f;
    color: #fff;
    border-color: #d32f2f;
    box-shadow: 0 2px 8px #d32f2f22;
  }
  
  .quote-form-modal .selectable-btn:hover {
    border-color: #d32f2f;
    color: #d32f2f;
    background: #fff5f5;
  }
  
  /* ================== Character Counter ================== */
  .quote-form-modal .char-counter {
    font-size: 0.9em;
    color: #888;
    float: right;
  }
  
  /* ================== Autocomplete ================== */
  .quote-form-modal .autocomplete-suggestions {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 16px #0001;
  }
  
  .quote-form-modal .autocomplete-suggestion {
    padding: 8px 16px;
    cursor: pointer;
  }
  
  .quote-form-modal .autocomplete-suggestion:hover,
  .quote-form-modal .autocomplete-suggestion.active {
    background: #f5f5f5;
  }
  
  /* ================== Modal Transparency Fix ================== */
  .modal-backdrop.show {
    opacity: 0 !important;
    background: transparent !important;
  }
  
  .modal.fade .modal-dialog {
    background: transparent !important;
  }
  
  .modal-content {
    background: #fff !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    border-radius: 1rem;
  }
  
  /* ================== Responsive ================== */
  @media (max-width: 768px) {
    .quote-form-modal .modal-dialog {
      max-width: 99vw;
      margin: 0.5rem auto;
    }
    .quote-form-modal .row > .col {
      flex: 0 0 100%;
      max-width: 100%;
    }
    .quote-form-modal .modal-content {
      padding: 0 2px;
    }
  }
  
  @media (max-width: 500px) {
    .quote-form-modal .modal-content {
      padding: 0 1px;
    }
    .quote-form-modal .form-label {
      font-size: 1em;
    }
    .quote-form-modal .btn,
    .quote-form-modal input,
    .quote-form-modal select,
    .quote-form-modal textarea {
      font-size: 1em !important;
    }
  }
  
  /* Ensure active/selected .btn-outline-danger has white text on red background */
  .btn-outline-danger.active,
  .btn-outline-danger:active,
  .btn-outline-danger:focus,
  .btn-outline-danger.checked,
  .btn-outline-danger[aria-pressed="true"] {
    color: #ffffff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
  }
  
  /* For radio/checkbox + label Bootstrap button groups */
  .btn-check:checked + .btn-outline-danger,
  .btn-check:active + .btn-outline-danger,
  .btn-outline-danger.active,
  .btn-outline-danger:active,
  .btn-outline-danger:focus,
  .btn-outline-danger.checked,
  .btn-outline-danger[aria-pressed="true"] {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
  }
  
  .quote-form-modal .form-control::placeholder {
    color: #5c5a5a !important;
    opacity: 1;
  }
  
  /* For Firefox */
  .quote-form-modal .form-control::-moz-placeholder {
    color: #5c5a5a !important;
    opacity: 1;
  }
  
  /* For Internet Explorer */
  .quote-form-modal .form-control:-ms-input-placeholder {
    color: #5c5a5a !important;
    opacity: 1;
  }
  
  /* For Edge */
  .quote-form-modal .form-control::-ms-input-placeholder {
    color: #5c5a5a !important;
    opacity: 1;
  }
  
  /* Additional selector for webkit browsers */
  .quote-form-modal .form-control::-webkit-input-placeholder {
    color: #5c5a5a !important;
    opacity: 1;
  }