/* ⛓️ CURSOR_ANCHOR:ui:feedback_modal */
/* Feedback Modal Component - Standard Design System */

/* Modal Content */
#feedbackModal .modal-content {
  border: 1px solid rgb(var(--grey-300));
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: rgb(var(--color-canvas));
}

/* Modal Header */
#feedbackModal .modal-header {
  border-bottom: 1px solid rgb(var(--grey-300));
  padding: var(--space-md) var(--space-lg);
  background: rgb(var(--color-canvas));
  border-radius: var(--radius) var(--radius) 0 0;
}

#feedbackModal .modal-header .modal-title {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: rgb(var(--color-text));
  margin: 0;
}

#feedbackModal .modal-header .btn-close {
  padding: var(--space-xs);
  margin: 0;
  opacity: 0.6;
  transition: opacity var(--dur) var(--easing);
}

#feedbackModal .modal-header .btn-close:hover {
  opacity: 1;
}

/* Modal Body */
#feedbackModal .modal-body {
  padding: var(--space-lg);
}

#feedbackModal .modal-body .form-label {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: rgb(var(--color-text));
  margin-bottom: var(--space-xs);
}

#feedbackModal .modal-body .form-control,
#feedbackModal .modal-body .form-select {
  border: 1px solid rgb(var(--grey-300));
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-body);
  color: rgb(var(--color-text));
  background: rgb(var(--color-canvas));
  transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}

#feedbackModal .modal-body .form-control:focus,
#feedbackModal .modal-body .form-select:focus {
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.1);
  outline: none;
}

#feedbackModal .modal-body .form-control::placeholder {
  color: rgb(var(--grey-500));
}

/* Modal Footer */
#feedbackModal .modal-footer {
  border-top: 1px solid rgb(var(--grey-300));
  padding: var(--space-md) var(--space-lg);
  background: rgb(var(--color-canvas));
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

/* Buttons */
#feedbackModal .modal-footer .btn {
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: background-color var(--dur) var(--easing), border-color var(--dur) var(--easing), color var(--dur) var(--easing);
  border: none;
  cursor: pointer;
}

#feedbackModal .modal-footer .btn-outline-secondary {
  background: transparent;
  color: rgb(var(--grey-700));
  border: 1px solid rgb(var(--grey-300));
}

#feedbackModal .modal-footer .btn-outline-secondary:hover:not(:disabled) {
  background: rgb(var(--grey-100));
  border-color: rgb(var(--grey-400));
  color: rgb(var(--grey-800));
}

#feedbackModal .modal-footer .btn-primary {
  background: rgb(var(--color-primary));
  color: rgb(var(--color-canvas));
  border: none;
}

#feedbackModal .modal-footer .btn-primary:hover:not(:disabled) {
  background: rgb(var(--color-primary-hover));
}

#feedbackModal .modal-footer .btn-primary:active:not(:disabled) {
  background: rgb(var(--color-primary-active));
}

#feedbackModal .modal-footer .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dark Mode Support */
  #feedbackModal .modal-content {
    background: rgb(var(--color-canvas));
    border-color: rgb(var(--grey-700));
  }
  #feedbackModal .modal-header {
    border-bottom-color: rgb(var(--grey-700));
    background: rgb(var(--color-canvas));
  }
  #feedbackModal .modal-header .modal-title {
    color: rgb(var(--color-text));
  }
  #feedbackModal .modal-body .form-control,
  #feedbackModal .modal-body .form-select {
    background: rgb(var(--grey-50));
    border-color: rgb(var(--grey-600));
    color: rgb(var(--color-text));
  }
  #feedbackModal .modal-footer {
    border-top-color: rgb(var(--grey-700));
    background: rgb(var(--color-canvas));
  }
  #feedbackModal .modal-footer .btn-outline-secondary {
    color: rgb(var(--grey-300));
    border-color: rgb(var(--grey-600));
  }